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