jQuery学习之：Validation表单验证插件
http://polaris.blog.51cto.com/1146394/258781/
?
?
最近由于公司決定使用AJAX + Struts2來重構項目，讓我仔細研究一下這兩個，然后集中給同事講講，讓每個人都能夠有所掌握，慢慢會用。于是，自己便開始學習……?
由于Struts2自己早就學過，因而不需要花多少時間。而AJAX之前沒怎么用過。現在AJAX框架如此之多，選擇哪一個呢？開始打算選擇 dojo，但是看了一點后，發現蠻復雜的。在之前有學過一點點jQuery，而網上也說jQuery很強大而且很容易上手。對于我這種情況，正需要上手快 的產品。于是，決定選擇jQuery。網上jQuery相關的資料很多，如果想學習jQuery，我個人覺得《鋒利的jQuery》蠻不錯的，推薦看看。?
快速的學習完jQuery的基礎知識后，便開始做Demo。這時發現一個問題：有些功能反復使用，能不能提取出來？既然我遇到了這樣的問題，其他 人肯定也遇到了。而jQuery的插件功能如此強大，肯定有相關好用成熟的插件可以使用。于是上網搜到了幾個。這篇文章首先跟大家分享一下 validation表單驗證插件的使用心得。（注：有些來自于網上，在此無法列出作者，請見諒！）?
我們都知道，提供客戶端驗證有很多好處，最重要的好處，我覺得就是能夠讓用戶及時的知道自己填寫是否正確，這樣是很友好的。軟件界有這么一句話：錯誤發現的越早，損失就會越少……因而，對于WEB開發，表單驗證是必不可少的。?
說到客戶端驗證，當然離不開javascript，然而，使用單純使用javascript有不少問題：1、冗余的代碼太多；2、要考慮瀏覽器的 兼容問題；3、工作量大。這幾個方面，筆者在項目中深有體會。之前，未進入公司工作時，總覺得公司編碼會多么多么的規范，進去之后，發現根本不是這么回 事。（當然，有些公司可能還是蠻規范的。）就拿我最近做的項目來說吧，我感覺代碼實在是太差了，簡直可以用慘不忍睹來形容。其中之一就是代碼很不規范，完 全就是為了實現功能，我有時跟同事開玩笑：這樣的代碼，只有自己能看懂吧……當然，不規范最嚴重的就是頁面代碼。一個jsp文件中，什么代碼都 有：java,jsp標簽,struts標簽，css，javascript等，總之能有的都有，不應該有的也有。其中最糟糕的是：同一個jsp文件 中，javascript代碼有寫在外部js文件中的，有寫在jsp文件的<head>中的，有寫在<body>中的，還有寫在 文件最后的。我看了之后很無語。記得又一次，我看他們寫的代碼，在一個外部js文件中發現有一個變量根本沒有定義賦值，很是奇怪，半天沒弄明白。一問，他 告訴我：在jsp文件的最后有定義那個全局變量……暈。當然，之所以出現這樣的情況是多方面得原因，并非同事水平不行，他們一般水平都比我高。還有，現在 的項目根本沒法在其他瀏覽器訪問，只能IE。正因為如此，我才建議應該重構。說了這么多，目的只有一個，那就是在應用中，我們應該考慮多方面，同時規范編 碼。同時，有些東西是重復的，為了提高工作效率，我們應該使用一些成熟的框架。下面就講講validation的相關知識。?
一、validate是jQuery的一個表單驗證插件，它不僅實現了客戶端表單的多種驗證規則，而且，還是用ajax實現了服務器端遠程驗證。 它內置有多種驗證規則，同時，可以很方便的定義自己的規則。在此，說明一些常用的功能，詳細的介紹，可以參考官方文檔。 http://docs.jquery.com/Plugins/Validation?
validation插件使用很簡單：
{?????
????????????????// 驗證規則?????
????????rules:?????
????????{},?????
????????// 驗證提示信息（失敗時）?????
????????????????message:{},?????
????????errorElement: 'span',?????????????????????????????????????????????// 放置錯誤信息的元素，可以是其他的。?????
????????errorPlacement:?function(error,element)?????????// 將錯誤提示信息放在什么地方?????
????????{},?????
????????????????// 成功時執行?????
????????success:?function(label)?????
????????{?????
????????????????label.text(" ")?????????????????????????????????????????// 將錯誤內容清空，一定要是" "有空格，否則IE有問題。?????
????????????????????????.addClass("success");?????
?????????????????????
????????}?????
});????
其中"formId"是表單的form元素的ID屬性。?
rules和message分別都對應一個對象，該對象只包含屬性，其中，屬性名為表單中input的name（包括select的name)，值為要應用的規則對象。如：
????????userName:{?????
????????????????required:true,?????
????????????????maxlength:20,?????
????????????????emote: {?????
???????????????????????? url:?"ajax/validateUserName.action",?????????//后臺處理程序?????
???????????????????????? type:?"post",?????????????????????????????//數據發送方式?????
???????????????????????? dataType:?"json",?????????????????????//接受數據格式????????????
????????????????????????????????data: {?????????????????????????????????????????//要傳遞的數據，默認已傳遞應用此規則的表單項?????
???????????????????????????????????? email:?function() {?????
????????????????????????????????????????????return?$("#email").val();?????
????????????????????????????????}?????
????????????????}?????
????????}?????
}????
message對應是一樣的，只是把規則的值改為提示信息，如：required:‘必填項'。?
validation內置的驗證規則如下：?
?? required:true 必填?
? minlength:最小長度?
? maxlength:最大長度?
? rangelength: [3,10] 長度介于 3 和 {1} 之間的字符串?
? range:[100,1000] 只能是100和 1000 之間的值”?
? min:最小值?
? max:最大值?
? email:true 驗證郵箱?
? url:true 驗證是否是合法的網址?
? date:true 驗證是否是合法的日期 new Date() 類型格式?
? dateISO:true 驗證是否是合法的日期 年/月/日 或 年-月-日 格式?
? number:true 驗證是否是合法的數字?
? digits:true 驗證是否為整數?
? creditcard: 驗證合法的信用卡號?
? equalTo:”要匹配的元素” 如:’#cnfpass’ , 驗證兩次輸入值是否相同?
? accept: “gif|png|jpg” 驗證是否是合法后綴名的字符串
????????url:?"ajax/validateUserName.action",?????????//后臺處理程序
????????type:?"post",?????????????????????????????//數據發送方式
????????dataType:?"json",?????????????????????//接受數據格式?????
????????data: {?????????????????????????????????????????//要傳遞的數據，默認已傳遞應用此規則的表單項
????????????????email:?function() {
????????????????????????return?$("#email").val();
????????????????}
????????}
注意：remote是遠程驗證：比如注冊驗證用戶名是否已被注冊，返回值只能是true（驗證成功）或false（驗證失敗）。?
除了內置的驗證規則，validation還允許自定義驗證規則。這是通過validation的addMethod方法實現的，語法 為：jQuery.validator.addMethod("name",function,message)。其中name為驗證規則的名 稱，function定義驗證的規則，message是驗證失敗時的提示信息。如：
????????return?this.optional(element) || (/^(\d+)\.(\d+)\.(\d+)\.(\d+)$/.test(value) && (RegExp.$1 < 256 && RegExp.$2 < 256 && RegExp.$3 < 256 && RegExp.$4 < 256));?????
????},?"Please enter a valid ip address.");?????
????// 增加只能是字母和數字的驗證?????
????jQuery.validator.addMethod("chrnum",?function(value, element) {?????
????????return?this.optional(element) || (/^([a-zA-Z0-9]+)$/.test(value));?????
????},?"Please enter a valid format(charactors, A-Z, a-z, 0-9 only).");?????
/**????
???????? * 自定義驗證規則——對電話號碼進行驗證????
???????? */????
????????$.validator.addMethod(?????
????????????????"isPhone",????????
????????????????function(value, element)????????
????????????????{????????????
????????????????????????// “/\(?0\d{2,3}[) -]?\d{7,8}/”匹配電話號碼的格式多種：010-82839278、(010)82839278、01082839278等，但是，這樣有一個問題?????
????????????????????????// 如：(01082839278這樣的也會匹配。當然可以用分支條件"|"解決，比較麻煩。而且以什么開始或結束也沒有匹配。?????
????????????????????????// 為了簡單起見，去掉有"()"的形式。匹配區號3位，則本地號8位，區號4位，則本地號7位的號碼。?????
????????????????????????var?tel = /^0\d{2}[-]?\d{8}$|^0\d{3}[-]?\d{7}$/;?????
????????????????????????return?this.optional(element) || (tel.test(value));?????
????????????????}?????
????????????????,?"電話號碼格式不對."????
????????);?????
還可以定義其他的驗證規則。應用自定義的規則很容易，自定義規則和內置規則用法是一樣的。?
在此，提供一個有用的驗證規則，那就是針對select下拉框的驗證：?
???????? * 自定義驗證規則——增加對select的驗證????
???????? */????
????????$.validator.addMethod(????????
????????????????"selectNone",?????????????????????????????// name驗證方法名?????
????????????????function(value, element)????????// 驗證規則?????
????????????????{?????
????????????????????????if?(value ==?"none")????????// select默認值需要設置為"none"(當然可以自定義其他值）?????
????????????????????????{????????
????????????????????????????????return?false;????????
????????????????????????}????????
????????????????????????else????????
????????????????????????{?????
????????????????????????????????return?true;????????
????????????????????????}?????
????????????????},????????
????????????????"必須選擇一項"????????// 默認驗證消息（自定義規則信息的國際化是否不起作用？）?????
????????);?????
二、驗證信息的國際化?
驗證信息國際化是很方便的，默認驗證信息是英文的，只需導入validation已寫好的國際化文件，如：?
<script?type="text/javascript"?src="scripts/jQuery/plugins/jquery.validate.messages_cn.js"></script>
在驗證時，去掉message，提示信息就會變成中文。?
可以改國際化文件中的提示信息內容，使其更加個性化、符合項目要求。另外，如果在驗證時使用了message，message中指定的字段提示信息會覆蓋國際化文件中的信息。?
這里有一個問題，國際化時似乎沒法根據瀏覽器的locale來自動識別該用什么語言來顯示。筆者測試了一下，當導入多國語言文件時，總是會使用最 后一次導入的語言。因此，要實現真正的國際化，可以通過一個鏈接之類的來選擇語言，然后用javascript來導入不同的語言文件。?
三、遠程驗證?
遠程驗證很有用，用戶體驗很好，因為不需要提交表單就知道自己注冊用戶的是否已被注冊。validation插件通過remote規則來實現驗證。在此講解一下如果將請求提交給struts2的action來驗證。?
remote規則的格式為：?
????????url:?"ajax/validateUserName.action",?????????//后臺處理程序
????????type:?"post",?????????????????????????????//數據發送方式
????????dataType:?"json",?????????????????????//接受數據格式?????
????????data: {?????????????????????????????????????????//要傳遞的數據，默認已傳遞應用此規則的表單項
????????????????email:?function() {
????????????????????????return?$("#email").val();
????????????????}
}
由于remote規則只允許后臺返回true或false，因此struts2的action得不同于一般的action，不能返回一個字符串，然后 dispatch一個視圖之類的。研究之后，發現struts2中有一種result類型：stream，通過該類型可以實現返回true或false。 action代碼如下：?
view plaincopy to clipboardprint?// 定義返回的輸入流?????
????????private?InputStream inputStream;?????
?????????????
????????// 定義需要到遠程驗證的字段?????
????????private?String userName;?????
????????private?String email;????????????
?????????????
????????// 定義返回值：只能為Boolean類型?????
????????private?Boolean valid;?????
?????????????
????????/**????
???????? * Action執行的方法：實現遠程驗證，將業務邏輯交給后臺處理，并接收結果????
???????? * 同時，將結果返回。????
???????? * @return????
???????? */????
????????public?String execute()?????
????????{?????
????????????????// 根據userName判斷該SP/CP是否已被注冊;根據email判斷該賬號是否已被占用?????
????????????????if(spcpPreApprovalService.existSpcpAccount(userName, email))?????
????????????????{?????
????????????????????????valid =?false;?????
????????????????}?????
????????????????else????
????????????????{?????
????????????????????????valid =?true;?????
????????????????}?????
?????????????????????
????????????????inputStream =?new?ByteArrayInputStream(valid.toString().getBytes());?????
?????????????????????
????????????????return?Action.SUCCESS;?????
????????}?????
????????// 省略getter、setter????
struts.xml文件的配置為：
??????????<action?name="validateSpId"?class="validateSpcpAction">
????????????<result?type="stream">
??????????????<param?name="contentType">text/html</param><!--?默認為text/plain?-->
??????????????<param?name="inputName">inputStream</param><!--?默認就為inputStream?-->
????????????</result>
??????????</action>
????????</package>
這樣便可以實現遠程驗證功能。?
總結?
可以看出validation使表單驗證變得很容易，實現起來很輕松。validation插件還有其他一些功能，需要了解可以查看官方文檔。?
由于寫的demo是把公司項目的一些頁面改為ajax+struts2，所以在此不方便把所有的代買貼出來。如果遇到什么問題，可以聯系我。
轉載于:https://www.cnblogs.com/coikeizeon/p/3807197.html
總結
以上是生活随笔為你收集整理的jQuery学习之：Validation表单验证插件的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Delphi中的进制转换
- 下一篇： 走进异步世界：博客程序的异步化改造以及发