zoukankan      html  css  js  c++  java
  • AngularJs表单自动验证

    angular-auto-validate

    地址:https://github.com/jonsamwell/angular-auto-validate

    引用: <script src="/Assets/JS/AngularJS/angular-auto-validate/dist/jcs-auto-validate.js" charset="utf-8"></script>

    依赖:var app= angular.module("appMain", ["jcs-autoValidate"]);

    汉化:langjcs-auto-validate_zh-cn.json目录下文件

    粘贴复制到jcs-auto-validate.js文件中

    上图是已经复制粘贴以后的,原文是英文,替换即可中文.

    注:如果发现最终显示的中文乱码,将jcs-auto-validate.js另存为UTF-8(650001)。

    保存完毕即可完美显示中文错误。

    如果发现现实错误消息地方有所偏差,可查看该处代码进行修正

    以上设置完毕后即可在项目文件中调用。

        <div class="form-group">
          <label for="username" class="control-label">Username</label>
          <input type="text" class="form-control " placeholder="角色名称" ng-model="model.RoleName" ng-required="true"  ng-minlength="7" ng-pattern="/^[A-Za-z0-9_]{1,32}$/" ng-pattern-err-type="BadName">
        </div>
    以上字段校验共有3个:1、必须填写;2:最小长度为7个字符;3:必须满足正则表达式要;
    至于ng-required和ng-minlength有默认的错误消息信息,所以可以不用关系。但正则表达式则需要根据不同的需求而定义不同的消息内容,那么可以做如下定义:
    ng-pattern="/^[A-Za-z0-9_]{1,32}$/" ng-pattern-err-type="BadName"
    我们定义了BadName,这里只需要添加服务即可

    app.run(function (defaultErrorMessageResolver) {
    defaultErrorMessageResolver.getErrorMessages().then(function (errorMessages) {
    errorMessages['BadName'] = '用户名只能包含数字、字母或下划线';
    });
    });

     这样,我们可以根据万能的正则表达式定义我们想要的错误信息

  • 相关阅读:
    JS实现继承的6种方式
    apply、call
    JS闭包
    javascript中的变量提升和函数提升
    判断设备
    c#对象的内存结构(学习笔记)
    快速排序发 继承构造方法的调用顺序
    .NetFrameWork介绍 枚举 结构复习 位运算(第三天的培训内容)
    摸底练习(培训第二天的内容)
    摸底练习
  • 原文地址:https://www.cnblogs.com/SilenceTom/p/5863376.html
Copyright © 2011-2022 走看看