jquery-validator中js校验及标签校验的使用

Posted 2020-10-12 super超人

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery-validator中js校验及标签校验的使用相关的知识，希望对你有一定的参考价值。

jquery-validator中js校验及标签校验的使用：

1.项目中引入jquery.validate.js 官方网站:http://bassistance.de/ http://jqueryvalidation.org/

2.js校验方式（自定义规则校验，扩展校验）：

js有默认的校验规则如：required、email、number等，下面是自定义新的校验规则：

   //证件号码
    jQuery.validator.addMethod("number", function(value, element){
        return this.optional(element) ||/^[a-zA-Z0-9]+$/.test(value);
    }, ""); //number表示新增方法的方法名
    //邮编
    jQuery.validator.addMethod("Postcode", function(value, element) {
        var tel = /^[0-9]{6}$/;
        return this.optional(element) || (tel.test(value));
    }, "");
    //登录密码
    jQuery.validator.addMethod("password", function(value, element){
        return this.optional(element) ||/^[a-zA-Z0-9]+$/.test(value);
    }, "");
    //理顾工号
    jQuery.validator.addMethod("jobnumber", function(value, element){
        return this.optional(element) ||/^[H][0-9]+$/.test(value);
    }, "");
    //手机号码
    jQuery.validator.addMethod("basicnum", function(value, element){
        return this.optional(element) ||regMobile.test(value);
    }, "");

　　 //表单序列化
    $("#formId").validate({
        ignore: "hidden",//验证属性为hidden的元素
        submitHandler: function() {
            //验证通过后 的js代码写在这里
        },
        rules: {
            number: {    //密码2的描述多于1项使用对象类型
                number: true          //使用自定义的验证规则,在上例中新增的部分
            },
            Postcode:{ //标签的name值
                Postcode:true  //方法名
            },
            password:{
                password:true
            },
            jobnumber:{
                jobnumber:true
            },
            basicnum:{
                basicnum:true
            }

        },
        messages: {
            number: {
                number: "证件号码只能是数字、字母"
            },
            Postcode: {
                Postcode: "请正确填写您的邮政编码"
            },
            password: {
                password: "密码只能是数字、字母"
            },
            jobnumber: {
                jobnumber: "只能是H+6位数字的格式,例如‘H002200‘"
            },
            basicnum: {
                basicnum: "请输入正确的手机号"
            }
        }
    })

3.标签校验及js校验(两种校验方式)：

一、默认验证规则

required:true	必须填写
remote:”check.php”	使用ajax方法调用check.php验证输入值(check.php返回true或false字符串)
email:true	必须输入有效的电子邮件
url:true	必须输入有效的网址
date:true	必须入有效的日期
dateISO:true	必须入有效的日期 (YYYY-MM-DD)，例如：2014-06-25，1998/06/09 只验证格式，不验证有效性
number:true	必须输入正确的数字(负数，小数)
digits:true	只可输入数字
creditcard:true	必须输入有效的信用卡号码
equalTo:”#field”	必须输入和#field相同的值
extension	必须输入有效的后缀
maxlength:10	输入长度最多 10 个字符串(汉字算一个字符)
minlength:5	输入长度最少 5 个字符串(汉字算一个字符)
rangelength:[5,10]	输入长度为必须介于 5 至 10 之间的字符串(汉字算一个字符)
range:[5,10]	输入数值必须介于 5 至 10 之间
max:10	输入数值不能大于 10
min:5	输入数值不能小于 5

二、默认的提示

messages: {
    required: "This field is required.",
    remote: "Please fix this field.",
    email: "Please enter a valid email address.",
    url: "Please enter a valid URL.",
    date: "Please enter a valid date.",
    dateISO: "Please enter a valid date ( ISO ).",
    number: "Please enter a valid number.",
    digits: "Please enter only digits.",
    creditcard: "Please enter a valid credit card number.",
    equalTo: "Please enter the same value again.",
    maxlength: $.validator.format( "Please enter no more than {0} characters." ),
    minlength: $.validator.format( "Please enter at least {0} characters." ),
    rangelength: $.validator.format( "Please enter a value between {0} and {1} characters long." ),
    range: $.validator.format( "Please enter a value between {0} and {1}." ),
    max: $.validator.format( "Please enter a value less than or equal to {0}." ),
    min: $.validator.format( "Please enter a value greater than or equal to {0}." )
},

可以使用中文的提示，引入messages_zh.js（在src/localization目录中）

觉得麻烦,一次要引入两个js,可以拿中文的提示覆盖jquery.validate.js中的英文提示(反正我会这么干，毕竟多数情况都中文的)，如下：

messages: {
    required: "必须填写",
    remote: "请修正此栏位",
    email: "请输入有效的电子邮件",
    url: "请输入有效的网址",
    date: "请输入有效的日期",
    dateISO: "请输入有效的日期 (YYYY-MM-DD)",
    number: "请输入正确的数字",
    digits: "只可输入数字",
    creditcard: "请输入有效的信用卡号码",
    equalTo: "你的输入不相同",
    extension: "请输入有效的后缀",
    maxlength: $.validator.format("最多 {0} 个字"),
    minlength: $.validator.format("最少 {0} 个字"),
    rangelength: $.validator.format("请输入长度为 {0} 至 {1} 之間的字串"),
    range: $.validator.format("请输入 {0} 至 {1} 之间的数值"),
    max: $.validator.format("请输入不大于 {0} 的数值"),
    min: $.validator.format("请输入不小于 {0} 的数值")
},

三、使用方式（两种）

1.将校验规则写到控件中

看了之前的别人写的文章，貌似是依赖jquery.metadata.js这个库，然后写的时候以 class=”required email” 这样的形式来写，这样写起来好像有些乱，class本身是呈现样式的，现在被附上各种校验的规则，看上去似乎有些乱，不过好在新版本中，又有了新的写法，不依赖上面的js库，以 data-rule-验证规则、data-msg-提示信息这样的格式来重新定义，更简单，更直观，更强大了。

<script src="../js/jquery.js"></script>
<script src="../js/jquery.validate.js"></script>
<script>
  $().ready(function() {
    $("#registerForm").validate();
  });
</script>
 
<form id="registerForm" method="get" action="">
  <fieldset>
    <p>
      <label for="cusername">用户名</label>
      <input id="cusername" name="username" type="text" data-rule-required="true" data-rule-rangelength="[2,10]" data-msg-required="用户名不能为空" data-msg-rangelength="用户名长度必须是2到10个字符">
    </p>
    <p>
      <label for="cpassword">密码</label>
      <input id="cpassword" name="password" type="password" data-rule-required="true" data-rule-minlength="6" data-msg-required="密码不能为空" data-msg-minlength="至少设置6位密码">
    </p>
    <p>
      <label for="cconfirmpassword">确认密码</label>
      <input id="cconfirmpassword" name="confirmpassword" type="password" data-rule-equalTo="#cpassword" data-msg-equalTo="两次密码不一致">
    </p>
    <p>
      <label for="cemail">邮箱</label>
      <input id="cemail" name="email" data-rule-required="true" data-rule-email="true" data-msg-required="邮箱不能为空" data-msg-email="邮箱的格式不正确">
      </input>
    </p>
    <p>
      <label for="chasreferee">有推荐人请勾选</label>
      <input type="checkbox" id="chasreferee" name="hasreferee">
    </p>
    <p>
      <label for="creferee">推荐人</label>
      <input id="creferee" name="referee" data-rule-required="#chasreferee:checked" data-msg-required="推荐人不能为空">
      </input>
    </p>
    <p>
      <input type="submit" value="提交">
    </p>
  </fieldset>
</form>

2.将校验规则写到代码中

个人感觉第一种写法，更适合做软件开发或是网站后台，而第二种写法更适合做网站的前台，对页面加载速度有苛刻的要求的时候，可以把脚本代码封装成一个单独的js，以提高网页的加载速度。

<script src="../js/jquery.js"></script>
<script src="../js/jquery.validate.js"></script>
<script>
$().ready(function() {
  $("#registerForm").validate({
 
    rules: {
      username: {
        required: true,
        rangelength: [2, 20]
      },
      password: {
        required: true,
        minlength: 6
      },
      confirmpassword: {
        equalTo: "#cpassword"
      },
      email: {
        required: true,
        email: true
      },
      referee: {
        required: "#chasreferee:checked"
      }
 
    },
    messages: {
      username: {
        required: "用户名不能为空",
        rangelength: "用户名长度必须是2到10个字符"
      },
      password: {
        required: "密码不能为空",
        minlength: "至少设置6位密码"
      },
      confirmpassword: {
        equalTo: "两次密码不一致"
      },
      email: {
        required: "邮箱不能为空",
        email: "邮箱的格式不正确"
      },
      referee: {
        required: "推荐人不能为空"
      }
    }
 
  });
});
</script>
 
<form id="registerForm" method="get" action="">
  <fieldset>
    <p>
      <label for="cusername">用户名</label>
      <input id="cusername" name="username" type="text">
    </p>
    <p>
      <label for="cpassword">密码</label>
      <input id="cpassword" name="password" type="password">
    </p>
    <p>
      <label for="cconfirmpassword">确认密码</label>
      <input id="cconfirmpassword" name="confirmpassword" type="password">
    </p>
    <p>
      <label for="cemail">邮箱</label>
      <input id="cemail" name="email">
      </input>
    </p>
    <p>
      <label for="chasreferee">有推荐人请勾选</label>
      <input type="checkbox" id="chasreferee" name="hasreferee">
    </p>
    <p>
      <label for="creferee">推荐人</label>
      <input id="creferee" name="referee">
      </input>
    </p>
    <p>
      <input type="submit" value="提交">
    </p>
  </fieldset>
</form>

四、常用方法及注意事项

1.用其他方式替代默认的SUBMIT（此种方法可以解决编辑内容时，所有内容验证通过表单不提交的问题）

$("#registerForm").validate({
    submitHandler:function(form){
    form.submit();
}
});

也可以设置validate的默认值

$.validator.setDefaults({
    submitHandler: function (form) {
    form.submit();
}
});

2.debug，如果这个参数为true，那么表单不会提交，只进行检查，调试时十分方便

$("#registerForm").validate({
    debug:true
});

或者

$.validator.setDefaults({
    debug: true
})

3.ignore：忽略某些元素不验证（默认情况是忽略:hidden及隐藏的元素不进行验证）

$.validator.setDefaults({
    ignore: ".ignore"
})

4.errorPlacement：指定错误信息存放的位置

有一组复选框或单选框的情况，将错误信息的位置，存放在一组元素最后，如下：

$("#registerForm").validate({
    errorPlacement: function (error, element) { //指定错误信息位置
        if (element.is(‘:radio‘) || element.is(‘:checkbox‘)) { //如果是radio或checkbox
            var eid = element.attr(‘name‘); //获取元素的name属性
            error.appendTo(element.parent()); //将错误信息添加当前元素的父结点后面
        } else {
            error.insertAfter(element);
        }
    }
});

原文：jquery.validate使用说明及注意事项:http://www.shouce123.com/archives/180.html

以上是关于jquery-validator中js校验及标签校验的使用的主要内容，如果未能解决你的问题，请参考以下文章

jquery-validator 的使用方法

jQuery-validate插件初级篇

怎么用jquery.validate.js 进行 remote 后台验证

使用jquery.validate.js实现boostrap3的校验和验证

Jquery validate校验如何根据校验结果的不同情况改变错误信息出现的位置

jquery-validation JQ 表单验证