jQuery Validate 触发机制
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="jquery-1.11.2.js">script>
<script src="jquery.validate.min.js">script>
<script>
$(document).ready(function () {
// 手机号码验证
jQuery.validator.addMethod("isMobile", function(value, element) {
var length = value.length;
return this.optional(element) || (length == 11 && /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/.test(value));
}, "请正确填写您的手机号码。");
$(".inputForm").validate({
onfocusin: function(element) { $(element).valid(); },
onfocusout: function(element) { $(element).valid(); },
onclick: function(element) { $(element).valid(); },
onkeyup: function(element) { $(element).valid(); },
rules:{
userName:{
required:true,
remote:{
type:"post",//数据请求方式
url:"login/checkUserName",//异步验证路径
data:{
"userName":function(){
return $(".userName").val();
}
},
dataType:"html",
dataFilter:function(data,type){//AJAX异步返回数据
data = eval("("+data+")");
if(data.state){
return true;
}else{
return false;
}
}
}
},
password:{
required:true,
rangelength:[5,20]
},
confirmPwd:{
required:true,
equalTo:"#password"
},
email:{
required:true,
email:true
},
mobile:{
required:true,
isMobile:true
}
},
messages:{
userName:{
required:"账号不能为空",
remote:"已经注册"
},
password:{
required:"密码不能为空",
rangelength:$.format("长度必须在{0}-{1}之间")
},
confirmPwd:{
required:"不能为空",
equalTo:"两次密码不一致"
},
email:{
required:"不能为空",
email:"请输入有效的邮箱地址"
},
mobile:{
required:"请输入手机号",
isMobile:"请输入有效手机号"
}
},
errorPlacement:function(error,element){//验证消息放置的地方
error.appendTo(element.siblings("span[class='error_span']"));//错误提示文本显示在当前文本框的兄弟span中
},
submitHandler: function (form) {
var url = "admin/login";
var params = $(".inputForm").serialize();
$.post(
url,
params,
function(data){
var result = eval("("+data+")");
alert(result);
}
);
}
});
});
script>
head>
<body>
<form class="inputForm">
<div>
<lable>用户名：lable>
<input type="text" name="userName" class="userName">
<span class="error_span">span>
div>
<div>
<lable>密码：lable>
<input type="password" name="password">
<span class="error_span">span>
div>
<div>
<lable>确认密码：lable>
<input type="password" name="confirmPwd">
<span class="error_span">span>
div>
<div>
<lable>邮箱：lable>
<input type="email" name="email">
<span class="error_span">span>
div>
<div>
<lable>手机：lable>
<input type="text" name="mobile">
<span class="error_span">span>
div>
<div>
<button type="submit">确认button>
<button type="reset">重置button>
div>
form>
body>
html>当我删除onfocusin: function(element) { $(element).valid(); },
onfocusout: function(element) { $(element).valid(); },
onclick: function(element) { $(element).valid(); },
onkeyup: function(element) { $(element).valid(); },
这四个触发条件时,表单依然能验证,为什么没有任何触发代码也能触发验证呢?
我带着疑问查阅相关资料发现,在老版本的jquery.validate.min.js中并没有默认触发机制,通过查看源码发现在验证email时有如下代码：
t(this.currentForm).validateDelegate(":text, [type='password'], [type='file'], select, textarea, [type='number'], [type='search'] ,[type='tel'], [type='url'], [type='email'], [type='datetime'], [type='date'], [type='month'], [type='week'], [type='time'], [type='datetime-local'], [type='range'], [type='color'] ", "focusin focusout keyup", e).validateDelegate("[type='radio'], [type='checkbox'], select, option", "click", e)通过调试发现删除括号中的focusin focusout keyup就不会触发email验证了，并且留下其中哪一个都无法触发。
但其他输入框仍在验证，于是我继续查找原因，但是我现在只发现rules第三个参数里每个参数只留下required就不会触发。
在其中我添加了一个验证手机的方法，同上一样，也是只留下required验证就不会自动触发验证，在排查过程中也排除了浏览器版本的问题，再想研究其中的源码中的问题就有些看不太明白了，我还需继续努力让自己不断提升。