本文實例講述了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程式設計有所幫助。