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 的远程桌面