目录
- 💂 个人主页:爱吃豆的土豆
- 💬 如果文章对你有帮助、欢迎关注、点赞、收藏(一键三连)和订阅专栏哦
- 🏆人必有所执,方能有所成!
- 🌈欢迎加入社区,福利多多哦!土豆社区
- 🐋希望大家多多支持😘一起进步呀!
jQuery-validation插件
导入
校验规则
自定义回显
自定义校验规则
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
| 必填字段
|
email
| 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校验之前