jQuery插件formValidator自定義函數(shù)擴(kuò)展功能實(shí)例詳解
本文實(shí)例講述了jQuery插件formValidator自定義函數(shù)擴(kuò)展功能的方法。分享給大家供大家參考,具體如下:
jQuery formValidator表單驗(yàn)證插件是什么?感興趣的讀者可參考《jQuery formValidator表單驗(yàn)證插件》以及本站其他相關(guān)文檔
此處省略若干文字。
實(shí)際項(xiàng)目中的表單應(yīng)用是多種多樣的,隨之而來(lái)的驗(yàn)證也是多變的,但Jquery formValidator為我們提供了自定義函數(shù)接口,個(gè)人認(rèn)為是其最主要的強(qiáng)大之處。廢話不多說(shuō),直接實(shí)例。
例一:座機(jī)和手機(jī),至少選其一,可以不選。
分析:這屬于組合驗(yàn)證,需要根據(jù)用戶選擇框體的不同進(jìn)行不同的驗(yàn)證條件。
知識(shí)點(diǎn):Jquery formvalidator提供了自定義函數(shù)接口為functionValidator({ fun: funname });
座機(jī)手機(jī)
$("#txtMobileTel,#txtContactTel").formValidator({ tipid: "txtMobileTelTip", onshow: "請(qǐng)?zhí)顚懭我环N聯(lián)系號(hào)碼", onfocus: "請(qǐng)輸入移動(dòng)電話或座機(jī)電話", oncorrect: "輸入正確!" }).functionValidator({ fun: allEmpty }); function allEmpty(val, elem) { if ($("#txtMobileTel").val() == "" && $("#txtContactTel").val() == "") { return '請(qǐng)輸入移動(dòng)電話或座機(jī)電話'; } else { if ($("#txtMobileTel").val() != "" && $("#txtContactTel").val() != "") { if (($("#txtMobileTel").val()).search(/^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/) != -1) { if (($("#txtContactTel").val()).search(/^(([0\+]\d{2,3}-)?(0\d{2,3})-)?(\d{7,8})(-(\d{3,}))?$/) != -1) { return true } else { return "座機(jī)電話格式錯(cuò)誤"; } } else { return "移動(dòng)電話格式錯(cuò)誤"; } } else { if ($("#txtMobileTel").val() != "") { if (($("#txtMobileTel").val()).search(/^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/) != -1) { return true } else { return "移動(dòng)電話格式錯(cuò)誤"; } } if ($("#txtContactTel").val() != "") { if (($("#txtContactTel").val()).search(/^(([0\+]\d{2,3}-)?(0\d{2,3})-)?(\d{7,8})(-(\d{3,}))?$/) != -1) { return true } else { return "座機(jī)電話格式錯(cuò)誤"; } } } };
例二:地區(qū)級(jí)聯(lián)下拉,當(dāng)不存在二級(jí)地區(qū)的下拉解除校驗(yàn)。
省市地區(qū)級(jí)聯(lián)
$("#ddlOne").formValidator({ onshow: "請(qǐng)選擇省市", onfocus: "省市必須選擇", oncorrect: "輸入正確" }).inputValidator({ min: 1, onerror: "請(qǐng)選擇有效的地區(qū)" }).functionValidator({ fun: city }); $("#ddlTwo").formValidator({ onshow: "請(qǐng)選擇城市", onfocus: "城市必須選擇", oncorrect: "輸入正確" }).inputValidator({ min: 1, onerror: "請(qǐng)選擇有效的地區(qū)" }); function city(val, elem) { var a = ""; $.getJSON("../Customer/Area.ashx?parentid=" + $("#ddlOne option:selected").val(), null, function(json) { if (json[0].areacode == "0") { $("#ddlTwo").attr("disabled", true).unFormValidator(true); //解除校驗(yàn) } else { $("#ddlTwo").attr("disabled", false).unFormValidator(false); //恢復(fù)校驗(yàn) } }); }
常用驗(yàn)證:
整數(shù):
正整數(shù):
$("#zzs").formValidator({onshow:"請(qǐng)輸入正整數(shù)",oncorrect:"謝謝你的合作,你的正整數(shù)正確"}).regexValidator({regexp:"intege1",datatype:"enum",onerror:"正整數(shù)格式不正確"});
負(fù)整數(shù):
$("#fzs").formValidator({onshow:"請(qǐng)輸入負(fù)整數(shù)",oncorrect:"謝謝你的合作,你的負(fù)整數(shù)正確"}).regexValidator({regexp:"intege2",datatype:"enum",onerror:"負(fù)整數(shù)格式不正確"});
正數(shù):
$("#zs1").formValidator({onshow:"請(qǐng)輸入正數(shù)",oncorrect:"謝謝你的合作,你的正數(shù)正確"}).regexValidator({regexp:"num1",datatype:"enum",onerror:"正數(shù)格式不正確"});
數(shù)字:
$("#sz").formValidator({onshow:"請(qǐng)輸入數(shù)字",oncorrect:"謝謝你的合作,你的數(shù)字正確"}).regexValidator({regexp:"num",datatype:"enum",onerror:"數(shù)字格式不正確"});
負(fù)數(shù):
$("#fs").formValidator({onshow:"請(qǐng)輸入負(fù)數(shù)",oncorrect:"謝謝你的合作,你的負(fù)數(shù)正確"}).regexValidator({regexp:"num2",datatype:"enum",onerror:"負(fù)數(shù)格式不正確"});
浮點(diǎn)數(shù):
$("#zfds").formValidator({onshow:"請(qǐng)輸入正浮點(diǎn)數(shù)",oncorrect:"謝謝你的合作,你的正浮點(diǎn)數(shù)正確"}).regexValidator({regexp:"decmal1",datatype:"enum",onerror:"正浮點(diǎn)數(shù)格式不正確"}); $("#ffds").formValidator({onshow:"請(qǐng)輸入負(fù)浮點(diǎn)數(shù)",oncorrect:"謝謝你的合作,你的負(fù)浮點(diǎn)數(shù)正確"}).regexValidator({regexp:"decmal2",datatype:"enum",onerror:"負(fù)浮點(diǎn)數(shù)格式不正確"}); $("#fffds").formValidator({onshow:"請(qǐng)輸入非負(fù)浮點(diǎn)數(shù)",oncorrect:"謝謝你的合作,你的非負(fù)浮點(diǎn)數(shù)正確"}).regexValidator({regexp:"decmal4",datatype:"enum",onerror:"非負(fù)浮點(diǎn)數(shù)格式不正確"}); $("#fzfds").formValidator({onshow:"請(qǐng)輸入非正浮點(diǎn)數(shù)",oncorrect:"謝謝你的合作,你的非正浮點(diǎn)數(shù)正確"}).regexValidator({regexp:"decmal5",datatype:"enum",onerror:"非正浮點(diǎn)數(shù)格式不正確"});
手機(jī):
$("#sj").formValidator({onshow:"請(qǐng)輸入你的手機(jī)號(hào)碼",onfocus:"必須是13或15打頭哦",oncorrect:"謝謝你的合作,你的手機(jī)號(hào)碼正確"}).regexValidator({regexp:"mobile",datatype:"enum",onerror:"手機(jī)號(hào)碼格式不正確"});
座機(jī):
$("#dh").formValidator({onshow:"請(qǐng)輸入國(guó)內(nèi)電話",onfocus:"例如:0577-88888888或省略區(qū)號(hào)88888888",oncorrect:"謝謝你的合作,你的國(guó)內(nèi)電話正確"}).regexValidator({regexp:"tel",datatype:"enum",onerror:"國(guó)內(nèi)電話格式不正確"});
郵箱:
$("#email").formValidator({onshow:"請(qǐng)輸入你的email",onfocus:"請(qǐng)注意你輸入的email格式,例如:wzmaodong@126.com",oncorrect:"謝謝你的合作,你的email正確"}).regexValidator({regexp:"email",datatype:"enum",onerror:"email格式不正確"});
郵編:
$("#yb").formValidator({onshow:"請(qǐng)輸入郵編",onfocus:"6位數(shù)字組成的哦",oncorrect:"謝謝你的合作,你的郵編正確"}).regexValidator({regexp:"zipcode",datatype:"enum",onerror:"郵編格式不正確"});
QQ:
$("#qq").formValidator({onshow:"請(qǐng)輸入QQ號(hào)碼",oncorrect:"謝謝你的合作,你的QQ號(hào)碼正確"}).regexValidator({regexp:"qq",datatype:"enum",onerror:"QQ號(hào)碼格式不正確"});
身份證:
$("#sfz").formValidator({onshow:"請(qǐng)輸入身份證",oncorrect:"謝謝你的合作,你的身份證正確"}).regexValidator({regexp:"idcard",datatype:"enum",onerror:"身份證格式不正確"});
字母:
$("#zm").formValidator({onshow:"請(qǐng)輸入字母",oncorrect:"謝謝你的合作,你的字母正確"}).regexValidator({regexp:"letter",datatype:"enum",onerror:"字母格式不正確"});
大寫字母:
$("#dxzm").formValidator({onshow:"請(qǐng)輸入大寫字母",oncorrect:"謝謝你的合作,你的大寫字母正確"}).regexValidator({regexp:"letter_u",datatype:"enum",onerror:"大寫字母格式不正確"});
小寫字母:
$("#xxzm").formValidator({onshow:"請(qǐng)輸入小寫字母",oncorrect:"謝謝你的合作,你的小寫字母正確"}).regexValidator({regexp:"letter_l",datatype:"enum",onerror:"小寫字母格式不正確"});
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
- jQuery插件擴(kuò)展實(shí)例【添加回調(diào)函數(shù)】
- jQuery插件擴(kuò)展extend的簡(jiǎn)單實(shí)現(xiàn)原理
- jQuery插件擴(kuò)展測(cè)試實(shí)例
- jQuery插件kinMaxShow擴(kuò)展效果用法實(shí)例
- jquery事件機(jī)制擴(kuò)展插件 jquery鼠標(biāo)右鍵事件
- JQuery模板插件 jquery.tmpl 動(dòng)態(tài)ajax擴(kuò)展
- boxy基于jquery的彈出層對(duì)話框插件擴(kuò)展應(yīng)用 彈出層選擇器
- jQuery下擴(kuò)展插件和拓展函數(shù)的寫法(匿名函數(shù)使用的典型例子)
- jquery.boxy插件的iframe擴(kuò)展代碼
- jQuery autocomplate 自擴(kuò)展插件、自動(dòng)完成示例代碼
- 利用jQuery插件擴(kuò)展識(shí)別瀏覽器內(nèi)核與外殼的類型和版本的實(shí)現(xiàn)代碼
- jQuery插件擴(kuò)展操作入門示例
相關(guān)文章
使用Jquery搭建最佳用戶體驗(yàn)的登錄頁(yè)面之記住密碼自動(dòng)登錄功能(含后臺(tái)代碼)
今天將登錄功能徹底完成,加入記住密碼自動(dòng)登錄功能,密碼在客戶端進(jìn)行第一次加密存儲(chǔ)。并修改了一些bug,優(yōu)化js代碼,上一版本太亂了。2011-07-07Ajax異步獲取html數(shù)據(jù)中包含js方法無(wú)效的解決方法
本文主要介紹了Ajax異步獲取html數(shù)據(jù)中包含js方法無(wú)效的解決方法,具有很好的參考價(jià)值,下面跟著小編一起來(lái)看下吧2017-02-02jQuery插件擴(kuò)展實(shí)例【添加回調(diào)函數(shù)】
這篇文章主要介紹了jQuery插件擴(kuò)展的方法,結(jié)合實(shí)例形式分析了jQuery插件添加回調(diào)函數(shù)與事件觸發(fā)機(jī)制的相關(guān)操作技巧,需要的朋友可以參考下2016-11-11基于jquery1.4.2的仿flash超炫焦點(diǎn)圖播放效果
有了jquery一切變的如此簡(jiǎn)單!讓js做的動(dòng)畫更有動(dòng)感。2010-04-04jQuery實(shí)現(xiàn)獲取綁定自定義事件元素的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)獲取綁定自定義事件元素的方法,涉及jQuery方法重載、事件綁定及元素操作的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-12-12最佳6款用于移動(dòng)網(wǎng)站開(kāi)發(fā)的jQuery 圖片滑塊插件小結(jié)
隨著智能手機(jī)的普及,越來(lái)越多的用戶喜歡通過(guò)手機(jī)中瀏覽網(wǎng)頁(yè)。今天這篇文章為大家推薦最佳6款用于移動(dòng)應(yīng)用的 jQuery 圖片滑塊插件,這些插件很好的處理了觸屏事件,效果平滑,幫助你構(gòu)建用戶體驗(yàn)良好的移動(dòng)網(wǎng)站2012-07-07jquery如何把參數(shù)列嚴(yán)格轉(zhuǎn)換成數(shù)組實(shí)現(xiàn)思路
某參數(shù)的列只有一個(gè)參數(shù),那么each是失敗,如何保證pp嚴(yán)格是數(shù)組呢,很簡(jiǎn)單var a=[pp];這一句就行了,感興趣的朋友可以參考下哈,希望可以幫助到你2013-04-04