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