-
Javascript知识【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校验之前
-
相关阅读:
请不要忽略软件测试的业务能力
Rust（16）：结构体方法
JUC第二十八讲：JUC工具类: Semaphore详解
稀疏矩阵的基础
电脑文件夹加密怎么做？6步教你设置文件夹密码
UEC++ 代理/委托
FPGA工程师面试试题集锦11~20
Spring源码解析——Spring事务是怎么通过AOP实现的？
day54 django中orm数据库增删改查
MSDC 4.3 接口规范（28）
- 原文地址：https://blog.csdn.net/m0_64550837/article/details/126317293