本文實例講述了jQuery插件formValidator自定義函數擴展功能的方法。分享給大家供大家參考,具體如下:
jQuery formValidator表單驗證插件是什么?感興趣的讀者可參考《jQuery formValidator表單驗證插件》以及本站其他相關文檔
此處省略若干文字。
實際項目中的表單應用是多種多樣的,隨之而來的驗證也是多變的,但Jquery formValidator為我們提供了自定義函數接口,個人認為是其最主要的強大之處。廢話不多說,直接實例。
例一:座機和手機,至少選其一,可以不選。
分析:這屬于組合驗證,需要根據用戶選擇框體的不同進行不同的驗證條件。
知識點:Jquery formvalidator提供了自定義函數接口為functionValidator({ fun: funname });
座機手機
$("#txtMobileTel,#txtContactTel").formValidator({ tipid: "txtMobileTelTip", onshow: "請填寫任一種聯系號碼", onfocus: "請輸入移動電話或座機電話", oncorrect: "輸入正確!" }).functionValidator({ fun: allEmpty });function allEmpty(val, elem) { if ($("#txtMobileTel").val() == "" && $("#txtContactTel").val() == "") { return '請輸入移動電話或座機電話'; } 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 "座機電話格式錯誤"; } } else { return "移動電話格式錯誤"; } } else { if ($("#txtMobileTel").val() != "") { if (($("#txtMobileTel").val()).search(/^(((13[0-9]{1})|(15[0-9]{1}))+/d{8})$/) != -1) { return true } else { return "移動電話格式錯誤"; } } 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 "座機電話格式錯誤"; } } }};
例二:地區級聯下拉,當不存在二級地區的下拉解除校驗。
省市地區級聯
$("#ddlOne").formValidator({ onshow: "請選擇省市", onfocus: "省市必須選擇", oncorrect: "輸入正確" }).inputValidator({ min: 1, onerror: "請選擇有效的地區" }).functionValidator({ fun: city }); $("#ddlTwo").formValidator({ onshow: "請選擇城市", onfocus: "城市必須選擇", oncorrect: "輸入正確" }).inputValidator({ min: 1, onerror: "請選擇有效的地區" });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); //解除校驗 } else { $("#ddlTwo").attr("disabled", false).unFormValidator(false); //恢復校驗 } });}
常用驗證:
整數:
正整數:
負整數:
正數:
數字:
負數:
浮點數:
$("#zfds").formValidator({onshow:"請輸入正浮點數",oncorrect:"謝謝你的合作,你的正浮點數正確"}).regexValidator({regexp:"decmal1",datatype:"enum",onerror:"正浮點數格式不正確"});$("#ffds").formValidator({onshow:"請輸入負浮點數",oncorrect:"謝謝你的合作,你的負浮點數正確"}).regexValidator({regexp:"decmal2",datatype:"enum",onerror:"負浮點數格式不正確"});$("#fffds").formValidator({onshow:"請輸入非負浮點數",oncorrect:"謝謝你的合作,你的非負浮點數正確"}).regexValidator({regexp:"decmal4",datatype:"enum",onerror:"非負浮點數格式不正確"});$("#fzfds").formValidator({onshow:"請輸入非正浮點數",oncorrect:"謝謝你的合作,你的非正浮點數正確"}).regexValidator({regexp:"decmal5",datatype:"enum",onerror:"非正浮點數格式不正確"});
手機:
座機:
郵箱:
郵編:
QQ:
身份證:
字母:
大寫字母:
小寫字母:
希望本文所述對大家jQuery程序設計有所幫助。
新聞熱點
疑難解答