導入插件的步驟：
- 將jquery的原始文件和插件文件jquery.validate.js導入到工程中
- 編寫js代碼對表單進行驗證
- 表單驗證的格式：
$("form表單的選擇器").validate(json數(shù)據(jù)格式); //鍵值對
鍵：值（{}）
json數(shù)據(jù)格式：
{
"rules":{
表單項name值:校驗規(guī)則旁赊，
表單項name值:校驗規(guī)則... ...
},
"messages":{
表單項name值:錯誤提示信息椅野，
表單項name值:錯誤提示信息... ...
}
}
其中：校驗規(guī)則，可以是一個也可以是多個声离，如果是多個使用json格式
常用校驗規(guī)則如下：
image
注意：
當錯誤提示信息不按照我們預想的位置顯示時瘫怜，我們可以按照如下方式進行設(shè)置自定義錯誤顯示標簽放在我們需要顯示的位置鲸湃，當此表單項驗證不通過時會將此信息自動顯示出來，jquery驗證插件會自動幫助我們控制它的顯示與隱藏
for="html元素name值" class="error"
style="display:none">錯誤信息
如果設(shè)置了錯誤lable標簽就不必在messages中設(shè)置此表單項錯誤提示信息了
如果預定義的校驗規(guī)則尚不能滿足需求的話可以進行自定義校驗規(guī)則：
自定義校驗規(guī)則步驟如下：
(1) 使用$.validator.addMethod("校驗規(guī)則名稱",function(value,element,params)){ return false;//表示校驗不通過笋除，會顯示錯誤提示信息}
(2) 在rules中通過校驗規(guī)則名稱使用校驗規(guī)則
(3) 在messages中定義該規(guī)則對應的錯誤提示信息
其中： value是校驗組件的value值
element是校驗組件的節(jié)點對象
params是校驗規(guī)則的參數(shù)
//自定義校驗規(guī)則
$.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在被賦值之前就已經(jīng)return
});
return !flag;//返回false表示校驗不通過
});
但是使用同步請求瀏覽器發(fā)出警告[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" : "用戶名已經(jīng)被注冊啦"
},
"password" : {
"required" : "密碼不能為空",
"rangelength" : "密碼長度必須介于6到12位"
},
"repassword" : {
"required" : "密碼不能為空",
"rangelength" : "密碼長度必須介于6到12位",
"equalTo" : "兩次密碼輸入不一致"
},
"email" : {
"required" : "郵箱不能為空",
"email" : "郵箱格式不正確"
},
"telephone" : {
"required" : "電話號碼不能為空"
},
"birthday" : {
"required" : "日期不能為空",
"dateISO" : "日期格式不正確"
}
}
});
});
- 自定義校驗崎岂、設(shè)置觸發(fā)方式、ajax刷新驗證碼圖片
<script type="text/javascript">
//自定義校驗規(guī)則
/* $.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在被賦值之前就已經(jīng)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" : "用戶名已經(jīng)被注冊啦"
},
"password" : {
"required" : "密碼不能為空",
"rangelength" : "密碼長度必須介于6到12位"
},
"repassword" : {
"required" : "密碼不能為空",
"rangelength" : "密碼長度必須介于6到12位",
"equalTo" : "兩次密碼輸入不一致"
},
"email" : {
"required" : "郵箱不能為空",
"email" : "郵箱格式不正確"
},
"telephone" : {
"required" : "電話號碼不能為空"
},
"birthday" : {
"required" : "日期不能為空",
"dateISO" : "日期格式不正確"
},
"randomcode" : {
"required" : "驗證碼不能為空",
"remote" : "驗證碼錯誤"
}
}
});
});
</script>
