导入插件的步骤：
- 将jquery的原始文件和插件文件jquery.validate.js导入到工程中
- 编写js代码对表单进行验证
- 表单验证的格式：
$("form表单的选择器").validate(json数据格式); //键值对
键：值（{}）
json数据格式：
{
"rules":{
表单项name值:校验规则，
表单项name值:校验规则... ...
},
"messages":{
表单项name值:错误提示信息，
表单项name值:错误提示信息... ...
}
}
其中：校验规则，可以是一个也可以是多个，如果是多个使用json格式
常用校验规则如下：
image
注意：
当错误提示信息不按照我们预想的位置显示时，我们可以按照如下方式进行设置自定义错误显示标签放在我们需要显示的位置，当此表单项验证不通过时会将此信息自动显示出来，jquery验证插件会自动帮助我们控制它的显示与隐藏
for="html元素name值" class="error"
style="display:none">错误信息
如果设置了错误lable标签就不必在messages中设置此表单项错误提示信息了
如果预定义的校验规则尚不能满足需求的话可以进行自定义校验规则：
自定义校验规则步骤如下：
(1) 使用$.validator.addMethod("校验规则名称",function(value,element,params)){ return false;//表示校验不通过，会显示错误提示信息}
(2) 在rules中通过校验规则名称使用校验规则
(3) 在messages中定义该规则对应的错误提示信息
其中： value是校验组件的value值
element是校验组件的节点对象
params是校验规则的参数
//自定义校验规则
$.validator.addMethod("checkUsername", function(value, elem, params) {
var flag = false;
$.ajax({
"url" : "${pageContext.request.contextPath}/checkUsername",
"data" : {
"username" : value
},
"dataType" : "json",
"success" : function(data) {
flag = data.isExist;
},
"async" : false//必须用同步，否则flag在被赋值之前就已经return
});
return !flag;//返回false表示校验不通过
});
但是使用同步请求浏览器发出警告[Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.
解决方法：使用插件的异步验证
remote：URL
使用 ajax 方式进行验证，默认会提交当前验证的值到远程地址，如果需要提交其他的值，可以使用 data 选项。
$(function() {
$("#myform")
.validate(
{
"rules" : {
"username" : {
"required" : true,
//"checkUsername" : true
"remote" : {
"type" : "post",
"url" : "${pageContext.request.contextPath}/checkUsername",
"data" : {
"username" : function() {
return $("#username").val();
}
},
//"dataType" : "html",
"dataType" : "json",
"dataFilter" : function(data, type) {
if (type == "json") {
data = JSON.parse(data);
return !data.isExist;
} else {
return data == "true" ? false
: true;
}
}
}
},
"password" : {
"required" : true,
"rangelength" : [ 6, 12 ]
},
"repassword" : {
"required" : true,
"rangelength" : [ 6, 12 ],
"equalTo" : "#password"
},
"email" : {
"required" : true,
"email" : true
},
"telephone" : {
"required" : true
},
"birthday" : {
"required" : true,
"dateISO" : true
}
},
"messages" : {
"username" : {
"required" : "用户名不能为空",
//"checkUsername" : "用户名已存在"
"remote" : "用户名已经被注册啦"
},
"password" : {
"required" : "密码不能为空",
"rangelength" : "密码长度必须介于6到12位"
},
"repassword" : {
"required" : "密码不能为空",
"rangelength" : "密码长度必须介于6到12位",
"equalTo" : "两次密码输入不一致"
},
"email" : {
"required" : "邮箱不能为空",
"email" : "邮箱格式不正确"
},
"telephone" : {
"required" : "电话号码不能为空"
},
"birthday" : {
"required" : "日期不能为空",
"dateISO" : "日期格式不正确"
}
}
});
});
- 自定义校验、设置触发方式、ajax刷新验证码图片
<script type="text/javascript">
//自定义校验规则
/* $.validator.addMethod("checkUsername", function(value, elem, params) {
var flag = false;
$.ajax({
"url" : "${pageContext.request.contextPath}/checkUsername",
"data" : {
"username" : value
},
"dataType" : "json",
"success" : function(data) {
flag = data.isExist;
},
"async" : false
//必须用同步，否则flag在被赋值之前就已经return
});
return !flag;
}); */
$(function() {
$("#randomcode").click(
function() {
$(this).attr(
"src",
$(this).attr("src")
.substring(
0,
$(this).attr("src").indexOf(
"randomcode") + 10)
+ "&" + new Date().getTime())
});
$("#myform")
.validate(
{ //"debug" : true,
"onkeyup":function(){
//alert("什么也不做~~");
},
"rules" : {
"username" : {
"required" : true,
//"checkUsername" : true
"remote" : {
"type" : "post",
"url" : "${pageContext.request.contextPath}/user?method=checkUsername",
"data" : {
"username" : function() {
return $("#username").val();
}
},
"dataType" : "json",
"dataFilter" : function(data, type) {
//alert(type);//json
if (type == "json") {
data = JSON.parse(data);
return !data.isExist;
} else {
return data == "true" ? false
: true;
}
}
}
},
"password" : {
"required" : true,
"rangelength" : [ 6, 12 ]
},
"repassword" : {
"required" : true,
"rangelength" : [ 6, 12 ],
"equalTo" : "#password"
},
"email" : {
"required" : true,
"email" : true
},
"telephone" : {
"required" : true
},
"birthday" : {
"required" : true,
"dateISO" : true
},
"randomcode" : {
"required" : true,
"remote" : {
"type" : "post",
"url" : "${pageContext.request.contextPath}/user?method=checkRandomcode",
"data" : {
"username" : function() {
return $("#randomcode").val();
}
},
"dataType" : "html",
"dataFilter" : function(data, type) {
//alert(type);//json
if (type == "json") {
data = JSON.parse(data);
return !data.isExist;
} else {
if(data=="false"){
/* alert("失败>刷新") */
$("#randomcode").attr(
"src",
$("#randomcode").attr("src")
.substring(
0,
$("#randomcode").attr("src").indexOf(
"randomcode") + 10)
+ "&" + new Date().getTime());
}
return data == "true" ? true
: false;
}
}
}
}
},
"messages" : {
"username" : {
"required" : "用户名不能为空",
//"checkUsername" : "用户名已存在"
"remote" : "用户名已经被注册啦"
},
"password" : {
"required" : "密码不能为空",
"rangelength" : "密码长度必须介于6到12位"
},
"repassword" : {
"required" : "密码不能为空",
"rangelength" : "密码长度必须介于6到12位",
"equalTo" : "两次密码输入不一致"
},
"email" : {
"required" : "邮箱不能为空",
"email" : "邮箱格式不正确"
},
"telephone" : {
"required" : "电话号码不能为空"
},
"birthday" : {
"required" : "日期不能为空",
"dateISO" : "日期格式不正确"
},
"randomcode" : {
"required" : "验证码不能为空",
"remote" : "验证码错误"
}
}
});
});
</script>
网友评论