jQuery前端基本驗證(三)
“兩個蝴蝶飛”特別喜歡"java1234知識分享網"小峰的實用主義，所以本文及其系列文章均是採用實用主義，從專案和程式碼的角度去分析。由於本人經驗有限，嘴皮子不溜，所以學術性，概念性，底層性的知識點暫時不做介紹。文章中有錯誤之處，歡迎拍磚和指點。特別感謝"java1234知識分享網 "和"黑馬程式設計師官網"，所有的資料大部分是兩者提供，為了方便書寫，故不一一指名出處，請諒解，非常抱歉。
上一章簡單介紹了Jquery前端基本驗證(二),如果沒有看過，請觀看上一章
前面講到了，我們自己手寫前端驗證，然後相對應的做一些簡單的封裝。但是發現，仍然有一些不小的問題。做進一步的優化，用Juqery自身提供的相關jquery-validate.js驗證框架進行相應的驗證。
一 所需要用的JS庫
第一: 需要用到jQuery庫 jquery.js
第二: 用jQuery框架庫, jquery-validate.js
第三: 方法庫 additional-methods.js
第四: 國際化庫 messages_zh.min.js
第五: 新增相應的圖示，正確圖示用checked.gif, 錯誤圖示用unchecked.gif
都放置在Plugins資料夾下:
二 用Class進行相關的驗證
在form1.jsp中新增相應的頁面，需要注意以下幾點:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <!--引入相應的JS庫--> <script src="Plugins/jquery-1.7.2.js"></script> <script src="Plugins/jquery.validate.min.js"></script> </head> <body> <form id="myform" class="cmxform" action="#" method="post"> <div> <label >姓名</label> <input type="text" id="cname" name="name" class="required" minlength="4" maxlength="10"/> </div> <div> <label>電子郵件</label> <input type="text" id="cemail" name="email" class="email"/><!--不為空,是email格式--> </div> <div> <label>網址</label> <input type="text" id="curl" name="url" class="url"/> </div> <div> <label>你的評論</label> <textarea cols="20" rows="3" id="ccomment" name="comment" class="required"></textarea> </div> <div> <input type="submit" value="提交"> </div> </form> </body> </html>
需要注意以下四點:
1. form表單的class應該為'cmxform' 即class="cmxform"
2. input標籤或者textarea標籤中, id的值應該為'c'+input標籤name的值。 如name為email,則相應的id為'cemail'
3. 在class中新增相關的驗證，如required(必填),email,url等。
4. 不要忘記引入驗證，否則驗證是不起作用的。
重啟伺服器，進行相關的驗證。
四 中文化提示資訊
現在提示資訊是預設的語句，而且是英文的。不太方便，換成中文的。只需要引入相應的JS國際化庫即可.
<script src="Plugins/jquery-1.7.2.js"></script> <script src="Plugins/jquery.validate.min.js"></script> <!-- 引入國際化庫 --> <script src="Plugins/messages_zh.min.js"></script>
重啟伺服器，進行驗證:
五 自定義提示資訊
提示資訊是jquery-validate.js驗證框架自帶的，為了更方便人性化，需要自定義提示資訊。
在JS中，新增一個與rules同級的messages標籤即可.
<script>
$(function() {
//用表單來呼叫validate()的外掛方法,裡面填寫一個物件
//以rules開頭
$("#myform").validate({
rules : {
//與表單的name值相同
name : {
required : true,
maxlength : 10,
minlength : 5,
//與型別同一級目錄
},
email : {
required : true,
email : true
},
url : {
url : true
},
comment : {
required : true
}
},
//messages與rules同級,裡面填寫相應的自定義提示
messages : {
//與表單的name值相同
name : {
required : '姓名不能為空',
maxlength : '姓名最大值不能超過10',
minlength:'最小值不能超過5'
},
email : {
email : '郵箱格式不合法'
},
url : {
url : '網格式不合法'
},
comment : {
required : '請輸入你的評論'
}
}
})
})
</script>重啟伺服器，進行相關的驗證
六 新增成功和錯誤的圖示
為了更加人性化一點，需要新增相對應的圖示。如果正確了，顯示正確的圖示，如果錯誤了，顯示錯誤的圖示。
1. 先定義一個CSS的樣式，將正確圖示和錯誤圖示引入。
<style type="text/css">
em.error {
background:url("Plugins/unchecked.gif") no-repeat 0px 0px;
padding-left: 16px;
}
em.success {
background:url("Plugins/checked.gif") no-repeat 0px 0px;
padding-left: 16px;
}
</style>2. 在與rules,messages同級的目錄下，新增關於圖示的支援。
errorElement: "em", //可以用其他標籤，記住把樣式也對應修改
success: function(label) {
//label指向上面那個錯誤提示資訊標籤em
label.text(" ") //清空錯誤提示訊息
.addClass("success"); //加上自定義的success類
}重啟伺服器，進行相關的驗證。
七 新增自定義驗證
有時候，需要新增自定義的驗證。 這裡新增一個手機號的驗證。
在HTML中新增手機的標籤
<div>
<label>你的電話</label>
<input type="text"
name="tel"/>
</div>在JS中，準確的說是在additional-methods.js新增對tel的相關驗證。 在additional-method.js的最後，按照上面的格式進行仿寫，
//新增自定義的驗證
$.validator.addMethod(
//這個tel標籤就是名稱，類似於定義好的email標籤
"tel",function(value,element,param){
//傳入的是引數的形式,其中value指我們在標籤中
//寫入的值,element指我們要操作的那個物件,
//param指得是我們傳入的引數，如true,2等.
//自定義的時候，一般指的是正則表示式
var reg=new RegExp(param);
return reg.test(value);
},
//輸入錯誤時顯示的提示資訊 即需要傳入三個引數,tel,function,和錯誤資訊.
"電話號碼格式不正確"
);
}));在JS中，新增相關的驗證資訊，在rules裡面
comment : {
required : true
},
//那麼在電話號碼時，那麼rules中:
//這個tel指的是標籤中的值
tel:{
//這個tel指的是上面定義的值,正則驗證.
tel: '^\\d{11}$'
}重啟伺服器，進行相關的驗證
正確時:
當輸入一次成功後，即使下面出錯，也會顯示正確的圖示 ，但會顯示錯誤的訊息提示。
懷疑是jquery版本的問題。將jquery版本換成1.3版本後,
<script src="Plugins/jquery-1.3.2.min.js"></script>上面這個問題就不存在了。
八 Ajax形式的驗證
對使用者名稱進行相關的ajax形式的驗證。
需要在rules下面，用一個remote進行相關的驗證。 remote已經被系統定義好了。
rules : {
//與表單的name值相同
name : {
required : true,
remote: {
type: "post",
url: '/Validate/ValidateServlet?a='+new Date().getTime(),
data: {
name: function() {
return $("input[name='name']").val();
}
},
dataType: "html",
//這裡，不是以前的success了.
dataFilter: function(data, type) {
if (data == "true")
return false;
else
return true;
}
},
maxlength : 10,
minlength : 5
//與型別同一級目錄
},只能返回true或者false。
這時，需要建立一個Servlet了。
簡單Servlet的內容有:
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
System.out.println("運動了嗎");
//先得到輸入的值
String name=request.getParameter("name");
String result="";
if("admin".equals(name)){
result="true";
}else{
result="false";
}
System.out.println("輸出結果是:"+result);
response.getWriter().print(result);
}不要忘記在web.xml中進行相關的配置。
<servlet>
<servlet-name>ValidateServlet</servlet-name>
<servlet-class>com.yjl.servlet.ValidateServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>ValidateServlet</servlet-name>
<url-pattern>/ValidateServlet</url-pattern>
</servlet-mapping>重啟伺服器，進行相關的驗證
九 提交表單驗證（不必用）
雖然標籤驗證時，有錯誤，但是當點選提交按鈕時，也是無法進行提交的，與需求一致。
本來準備利用這種方式解決的，
$("#myform").validate({
submitHandler:function(form){ //表單提交後要執行的內容
alert("成功了");
form.submit();
} ,
rules{
}但現在看來，不用了. 驗證框架會自己進行相應的檢測。這點非常好。
但是利用驗證框架，仍然有一些問題需要自己處理。 就是驗證後的提示語句放在了標籤後面，影響美觀。而且提示方式也不太好。需要繼續優化一下。
寫的過程中，瀏覽器崩潰了三次，心態都快炸了，但最後還是寫完了,只是內容寫得不太好。沒有辦法，心態已經炸了。
謝謝!!!