jQuery-validation插件
导入
轻松完成复杂表单校验。
<!--先导入jQuery，再导入validation，最后导入中文提示包 --> <script src="../js/jquery-3.3.1.min.js"></script> <script src="../js/jquery.validate.js"></script> <script src="../js/messages_zh.js"></script>
校验规则
需要给表单加入validate校验
<script> $(function () { $("#f1").validate(); }); </script> <script> $(function () { $("#f1").validate({ rules:{ username:{ required:true, rangelength:[6,10] } } }); }); </script>
<script> $(function () { $("#f1").validate({ rules:{ username:{ required:true, rangelength:[6,10] }, email:{ email:true }, birthday:{ date:true }, sal:{ number:true }, workForday:{ range:[6,16] }, pwd:{ required:true }, repwd:{ required:true, equalTo:"input[name='pwd']" } } }); }); </script>
| 校验类型 | 取值 | 描述 |
| required | true 或 false |
必填字段 |
| true 或 false | 邮件地址 | |
| date | true 或 false | 日期，设用于通过的日期格式使用以下常用日期格式 YYYYYYYY-MM YYYY-MM-dd YYYY/MM/dd YYYY/MM/dd hh:mm:ss YYYY-MM-dd hh:mm:ss |
| dateISO | true 或 false | 日期（YYYY-MM-dd） |
| number | true 或 false | 数字（负数，小数） |
| digits | true 或 false | 整数 |
| minlength | 填写具体数字 | 最小长度 |
| maxlength | 填写具体数字 | 最大长度 |
| rangelength | （minL，maxL） | 长度范围 |
| min | 最小值 | |
| max | 最大值 | |
| range | [min,max] | 值范围 |
| equalTo | jQuery表达式 | 两个值相同 |
| remote | url路径 | ajax校验 |
| url | 路径 |
自定义回显
<script> $(function () { $("#f1").validate({ rules:{ username:{ required:true, rangelength:[6,10] }, email:{ email:true }, birthday:{ date:true }, sal:{ number:true }, workForday:{ range:[6,16] }, pwd:{ required:true }, repwd:{ required:true, equalTo:"input[name='pwd']" } }, messages:{ username:{ required:"小伙，这个得填呐", rangelength:"小伙，长度范围得是{0}~{1}之间呐" } } }); }); </script>
<form id="f1"> <label class= "errro" for="username"></label> //在此处for=“username”会报红，是因为idea不认识该方式，不影响使用 </form>
注意：label标签必须位于当前validate的form表单之中。
自定义校验规则
<script> var reg = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/; $(function () { //必须在为表单绑定校验之前，添加自定义规则 $.validator.addMethod("idCardChecked",function (value,ele,params) { //1、若程序员传递true，说明程序员需要进行校验 if(params){ //2、就对value值进行正则校验 //3、根据正则结果进行值返回 return reg.test(value); } //若传递规则值不为true，说明程序员不需要进行校验，不校验直接放行 return true; },"必须符合身份证的格式才行"); $("#f1").validate({ rules:{ username:{ required:true, rangelength:[6,10] }, idCard:{ idCardChecked:true } } }); }); </script>
注意：该自定义校验规则 必须放置于 为表单绑定validate校验之前
