niceValidate使用

引入jquery

<script src="js/jquery.js"></script>

引入js文件

<script src="validator/jquery.validator.min.js?local=zh-CN"></script>

html配置规则

<div id="msg1"></div>
<input type="text" class="form-control" name="name" id="name" data-rule="required" data-target="#msg1">

内置规则

required - 必填

适用于 input、textarea、select 输入框。（checkbox 与 radio 请使用 checked 规则）字段必填，则值不能为空。字段非必填，则值为空的时候直接验证通过 nice-validator 扩展了选择器 :filled，选择填写了的字段

规则	描述	示例
required	字段必填	required
required(ruleName)	满足规则 ruleName 则字段必填	required(isCompany)
required(jqSelector)	满足 jqSelector 则字段必填	required(#id:filled)、required(#id:checked)、required(#id:enabled)
required(from, class, count)	在一组字段中至少填写一个或多个	required(from, .contact)
required(not, value)	字段必填，但是排除值为 value 的情况	required(not, -1)

checked - 必选

注意：checkbox 和 radio 类型的输入框请使用 checked 规则（而不是 required）

规则	描述
checked	必选
checked(n)	必选 n 项
checked(n~)	至少选择 n 项
checked(_n)	最多选择 n 项
checked(n1_n2)	选择 n1 到 n2 项

match - 两个字段匹配和比较

match 可以用于比较两个字段值是否相同，或是否不同，或大小关系，也可以用于比较日期或者时间

规则	描述
match(name)	当前字段值必须和 name 字段的值匹配
match(eq, name)	当前字段值必须和 name 字段的值匹配
match(neq, name)	当前字段值必须和 name 字段值不同
match(lt, name)	当前字段值必须小于 name 字段值
match(gt, name)	当前字段值必须大于 name 字段值
match(lte, name)	当前字段值必须小于等于 name 字段值
match(gte, name)	当前字段值必须大于等于 name 字段值
match(gte, name, date)	当前日期值必须大于等于 name 字段日期值
match(gte, name, datetime)	当前时间值必须大于等于 name 字段时间值

remote - 远程验证

服务端验证并返回结果，URL 为必传参数，默认 POST 请求

规则	描述
remote(URL)	请求服务端验证
remote(get:URL)	使用 GET 方式请求服务端验证
remote(URL, name1, #id2 …)	传递额外动态参数
remote(URL, foo=value1&bar=value2, name3 …)	传递额外固定参数
remote(URL, foo:name1, bar:#id2, name3 …)	代理参数名称（实际服务器接收的参数为 foo 和 bar）
remote(jsonpURL)	跨域地址自动采用 JSONP 请求方式
remote(jsonp:URL)	强制 JSONP 请求方式
remote(cors:post:URL)	强制 CORS + POST 请求方式

integer - 整数

整数或者整数范围

规则	描述
integer	整数
integer(+)	正整数
integer(+0)	正整数和零
integer(-)	负整数
integer(-0)	负整数和零

range - 数值范围

注意：只验证范围，不验证是整数或者浮点数

规则	描述
range(n~)	请填写不小于 n 的数
range(_n)	请填写不大于 n 的数
range(n1_n2)	请填写 n1 到 n2 的数
range(n1_n2, false)	请填写 n1 到 n2 的数（不包含边界值）

length - 字符长度

如果传第二个参数 “true”，则全角字符（汉字）计算为两个字符

规则	描述
length(n)	请填写 n 个字符
length(n~)	请至少填写 n 个字符
length(_n)	请最多填写 n 个字符
length(n1_n2)	请填写 n1 到 n2 个字符
length(n~, true)	请至少填写 n 个字符（全角字符计算双字符）

filter - 过滤字符

注意：只过滤字符，不验证

规则	描述
filter	过滤 <>`"' 和字符实体编码的字符 \|

| filter(RegExp) | 自定义过滤正则 |

自定义规则

$('#myForm').validator({
  msgClass: "n-right block",
  focusCleanup: true,
  rules: {
    email: [/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/, '请填写有效的电子邮箱'],
    idcard: function(element) {
      var value = element.value, isValid = true;
      var cityCode = {11:"北京",12:"天津",13:"河北",14:"山西",15:"内蒙古",21:"辽宁",22:"吉林",23:"黑龙江 ",31:"上海",32:"江苏",33:"浙江",34:"安徽",35:"福建",36:"江西",37:"山东",41:"河南",42:"湖北 ",43:"湖南",44:"广东",45:"广西",46:"海南",50:"重庆",51:"四川",52:"贵州",53:"云南",54:"西藏 ",61:"陕西",62:"甘肃",63:"青海",64:"宁夏",65:"新疆",71:"台湾",81:"香港",82:"澳门",91:"国外 "};
      var rFormat =/^\d{6}(19|20)\d{2}(0[1-9]|1[012])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$|^\d{6}\d{2}(0[1-9]|1[012])(0[1-9]|[12]\d|3[01])\d{3}$/;    // 格式验证
      if ( !rFormat.test(value) || !cityCode[value.substr(0,2)] ) {
        isValid = false;
      }else if (value.length === 18) {
        var Wi = [ 7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2, 1 ];    // 加权因子
        var Ci = "10X98765432"; // 校验字符
        // 加权求和
        var sum = 0;
        for (var i = 0; i < 17; i++) {
          sum += value.charAt(i) * Wi[i];
        }
        // 计算校验值
        var C17 = Ci.charAt(sum % 11);
        // 与校验位比对
        if ( C17 !== value.charAt(17) ) {
          isValid =false;
        }
      }
      return isValid || "请填写正确的身份证号码";
    }
  },
  valid: function(form){
    $.post("/info", $(form).serialize(),function(d){
      if(d.status == 'success'){
        alert('报名成功');
        $('#myForm')[0].reset();
      }
    }, 'json');
  }
});

示例

字段必填

<input type="text" name="username" data-rule="required">
<select name="gender" data-rule="required">
    <option value="">select ...</option>
    <option value="1">Male</option>
    <option value="2">Female</option>
    <option value="3">Other</option>
</select>
<textarea name="content" data-rule="required"></textarea>

<label><input type="radio" name="gender" value="1" data-rule="checked">男</label>
<label><input type="radio" name="gender" value="2">女</label>
<label><input type="radio" name="gender" value="0">保密</label>

<label><input type="checkbox" name="type[]" value="1" data-rule="checked">A</label>
<label><input type="checkbox" name="type[]" value="2">B</label>
<label><input type="checkbox" name="type[]" value="3">C</label>

只有在 A 字段填写过后，B 字段才必填

$('#form1').validator({
    fields: {
        A: 'required',
        B: 'required(#A:filled)'
    }
});

如果满足 jQuery 选择器 “#isCompany:checked”，则字段必填

$('#form1').validator({
    fields: {
        companyName: 'required(#isCompany:checked)'
    }
});

如果满足规则 “isCompany”，则字段必填

<form id="form1">
    <input type="checkbox" name="isCompany" id="isCompany">
    <input type="text" name="companyName">
</form>

$('#form1').validator({
    rules: {
        isCompany: function() {
            return $('#isCompany').prop('checked');
        }
    },
    fields: {
        companyName: 'required(isCompany)'
    }
});

className 为 contact 的字段至少填写一个

<input class="contact" name="mobile" placeholder="手机号"
    data-rule="required(from, .contact); mobile"
    data-msg-required="请至少填写一种联系方式">

<input class="contact" name="tel" placeholder="电话"
    data-rule="required(from, .contact); tel">

<input class="contact" name="email" placeholder="邮箱"
    data-rule="required(from, .contact); email">

确认密码要与密码一致

<label>密码：</label>
<input name="pwd" data-rule="密码: required;password;">
<label>确认密码：</label>
<input name="confirmPwd" data-rule="确认密码: match(pwd);">

结束日期必须大于开始日期

<label>开始日期：</label>
<input name="startDate" data-rule="开始日期: required;date;">
<label>结束日期：</label>
<input name="endDate" data-rule="结束日期: required;date;match(gt, startDate, date)">

前端转换服务端返回的结果格式

/* 假设服务端返回结果为： {"status":600, "msg":"名字已被占用"}
 */
$('#form1').validator({
    dataFilter: function(data) {
        if (data.status === 200) {
          return "";
        }else{
          return data.msg;
        }
    },
    fields: {
        name: "required; length(4~12); remote(/user/check/name)"
    }
});

输入 0 ~ 100 的整数

<input name="score" data-rule="required; integer[+0]; range[~100]">

密码为 6 到 16 位

<input type="password" name="pwd" data-rule="required;length(6~16)">

内容不超过 140 个字符

<textarea name="content" data-rule="length(~140)"></textarea>

过滤非数字字符

"filter(\D)"

过滤非中文

"filter(^\u0391-\uFFE5)"