validator js验证器

Posted scmath

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了validator js验证器相关的知识,希望对你有一定的参考价值。

转自:https://github.com/jaywcjlove/validator.js

轻量级的javascript表单验证,字符串验证。没有依赖,支持UMD

导入js库

<script type="text/javascript" src="<%=path %>/validate/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="<%=path %>/validate/jquery.validate.min.js"></script>

 

 

简单.js验证

// 字符串验证
var validator = require(\'validator.tool\');
var v = new validator();
v.isEmail(\'wowohoo@qq.com\');
v.isIp(\'192.168.23.3\');
v.isFax(\'\');

// 表单验证
var a = new validator(\'example_form\',[
    {...}
],function(obj,evt){
    if(obj.errors){
        // 判断是否错误
    }
})

表单验证:

<form id="example_form">
    <div>
        <label for="email">邮箱验证</label>
        <input type="email" name="email" id="email" class="form-control" placeholder="Email">
    </div>
    <div class="form-group">
        <label for="passworld">密码:</label>
        <input type="passworld" name="passworld" id="passworld" class="form-control" placeholder="输入密码">
    </div>

    <div class="form-group">
        <label for="repassworld">确认密码:</label>
        <input type="repassworld" name="repassworld" id="repassworld" class="form-control" placeholder="输入密码">
    </div>
</form>
<script type="text/javascript">
  var validator = new Validator(\'example_form\',[
    {
        //name 字段
        name: \'email\',
        display:"你输入的不{{email}}是合法邮箱|不能为空|太长|太短",
        // 验证条件
        rules: \'is_emil|max_length(12)\'
        // rules: \'valid_email|required|max_length(12)|min_length(2)\'
    },{
      name:"passworld",
      display:"必填",
      rules: \'required\'
    },{
      name:"repassworld",
      display:"密码不一致",
      rules: \'same(passworld)\'
    }
  ],function(obj,evt){
      if(obj.errors){
          // 判断是否错误
      }
  })
</script>

 

说明文档:

new Validator(formName, option, callback)

forname:  是标签中<form> 中的 id 或者 name 的值,如上面的example_form

option:

 

  • name -> input 中 name 对应的值

  • display -> 验证错误要提示的文字 {{这个中间是name对应的值}}

  • rules -> 一个或多个规则(中间用|间隔)

    • is_email -> 验证合法邮箱
    • is_ip -> 验证合法 ip 地址
    • is_fax -> 验证传真
    • is_tel -> 验证座机
    • is_phone -> 验证手机
    • is_url -> 验证URL
    • is_money -> 金额格式验证
    • is_english -> 字母验证⚠️
    • is_chinese -> 中文验证
    • is_percent -> 验证百分比⚠️
    • required -> 是否为必填
    • max_length -> 最大字符长度
    • min_length -> 最小字符长度
    • same(field) -> 指定字段内容是否相同
    • different(field) -> 拒绝与某个字段相等,比如登录密码与交易密码情况
    • contains(field) -> 直接判断字符串是否相等
    • accepted(field) -> 用于服务条款,是否同意时相当有用,不限制checkbox与radio,有可能submit button直接附带value情况
例如:
{ //name 字段 name: \'email\', display:"你输入的不{{email}}是合法邮箱|不能为空|太长|太短", // 验证条件 rules: \'is_email|max_length(12)\' // rules: \'valid_email|required|max_length(12)|min_length(2)\' }

自定义正则:以regexp_开始
{
  //name 字段
  name: \'sex\',
  // 对应下面验证提示信息
  display:"请你选择性别{{sex}}|请输入数字",
  //自定义正则`regexp_num`
  regexp_num:/^[0-9]+$/,
  // 验证条件,包括应用自定义正则`regexp_num`
  rules: \'required|regexp_num\'
}


remote:URL 异步验证
使用ajax方式进行验证,默认会提交当前验证的值到远程地址,如果需要提交其他的值,可以使用data选项
示例一:
remote: "check-email.php"
示例二:
remote: {
    url: "check-email.php",     //后台处理程序
    type: "post",               //数据发送方式
    dataType: "json",           //接受数据格式   
    data: {                     //要传递的数据
        username: function() {
            return $("#username").val();
        }
    }
}

 

自定义验证方法
addMethod(name, method, message)
// 中文字两个字节
jQuery.validator.addMethod(
    "byteRangeLength", 
    function(value, element, param) {
        var length = value.length;
        for(var i = 0; i < value.length; i++){
            if(value.charCodeAt(i) > 127){
                length++;
            }
        }
        return this.optional(element) || (length >= param[0] && length <= param[1]);   
    }, 
    $.validator.format("请确保输入的值在{0}-{1}个字节之间(一个中文字算2个字节)")
);

// 邮政编码验证   
jQuery.validator.addMethod("isZipCode", function(value, element) {   
    var tel = /^[0-9]{6}$/;
    return this.optional(element) || (tel.test(value));
}, "请正确填写您的邮政编码");

 





默认规则:
(1)、required:true               必输字段
(2)、remote:"remote-valid.jsp"   使用ajax方法调用remote-valid.jsp验证输入值
(3)、email:true                  必须输入正确格式的电子邮件
(4)、url:true                    必须输入正确格式的网址
(5)、date:true                   必须输入正确格式的日期,日期校验ie6出错,慎用
(6)、dateISO:true                必须输入正确格式的日期(ISO),例如:2009-06-23,1998/01/22 只验证格式,不验证有效性
(7)、number:true                 必须输入合法的数字(负数,小数)
(8)、digits:true                 必须输入整数
(9)、creditcard:true             必须输入合法的信用卡号
(10)、equalTo:"#password"        输入值必须和#password相同
(11)、accept:                    输入拥有合法后缀名的字符串(上传文件的后缀)
(12)、maxlength:5                输入长度最多是5的字符串(汉字算一个字符)
(13)、minlength:10               输入长度最小是10的字符串(汉字算一个字符)
(14)、rangelength:[5,10]         输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符)
(15)、range:[5,10]               输入值必须介于 5 和 10 之间
(16)、max:5                      输入值不能大于5
(17)、min:10                     输入值不能小于10

转自  https://www.cnblogs.com/linjiqin/p/3431835.html

 

以上是关于validator js验证器的主要内容,如果未能解决你的问题,请参考以下文章

jquery.validate.js自定义表单验证

jquery.validate.min.js表单验证问题

js的validate插件异步效验

jQuery验证控件jquery.validate.js汉化

validator js验证器

[转]jQuery.validate插件在失去焦点时执行验证代码