首頁 > web前端 > js教程 > 主體

jQuery外掛程式formValidator自訂函數擴充功能實例詳解_jquery

WBOY
發布: 2016-05-16 15:29:50
原創
1473 人瀏覽過

本文實例講述了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); //恢复校验
  }
 });
}

登入後複製

常用驗證:

整數:

複製程式碼 程式碼如下:
$("#zs").formValidator({onshow:"請輸入整數" ,oncorrect:"謝謝你的合作,你的整數正確"}).regexValidator({regexp:"intege",datatype:"enum",onerror:"整數格式不正確"});

正整數:

複製程式碼 程式碼如下:

$("#zzs").formValidator({onshow:"請輸入正整數",oncorrect:"謝謝你的合作,你的正整數正確"}).regexValidator({regexp:"intege1",datatype:"enum ",onerror:"正整數格式不正確"});

負整數:

複製程式碼 程式碼如下:

$("#fzs").formValidator({onshow:"請輸入負整數",oncorrect:"謝謝你的合作,你的負整數正確"}).regexValidator({regexp:"intege2",datatype:"enum ",onerror:"負整數格式不正確"});

正數:

複製程式碼 程式碼如下:

$("#zs1").formValidator({onshow:"請輸入正數",oncorrect:"謝謝你的合作,你的正數正確"}).regexValidator({regexp:"num1",datatype:"enum ",onerror:"正數格式不正確"});

數字:

複製程式碼 程式碼如下:

$("#sz").formValidator({onshow:"請輸入數字",oncorrect:"謝謝你的合作,你的數字正確"}).regexValidator({regexp:"num",datatype:"enum", onerror:"數字格式不正確"});

負數:

複製程式碼 程式碼如下:

$("#fs").formValidator({onshow:"請輸入負數",oncorrect:"謝謝你的合作,你的負數正確"}).regexValidator({regexp:"num2",datatype:"enum", onerror:"負數格式不正確"});

浮點數:

$("#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:"非正浮点数格式不正确"});

登入後複製

手機:

複製程式碼 程式碼如下:

$("#sj").formValidator({onshow:"請輸入你的手機號碼",onfocus:"必須是13或15打頭哦",oncorrect:"謝謝你的合作,你的手機號碼正確"}) .regexValidator({regexp:"mobile",datatype:"enum",onerror:"手機號碼格式不正確"});

座機:

複製程式碼 程式碼如下:

$("#dh").formValidator({onshow:"請輸入國內電話",onfocus:"例如:0577-88888888或省略區號88888888",oncorrect:"謝謝你的合作,你的國內電話正確"}) .regexValidator({regexp:"tel",datatype:"enum",onerror:"國內電話格式不正確"});

信箱:

複製程式碼 程式碼如下:

$("#email").formValidator({onshow:"請輸入你的email",onfocus:"請注意你輸入的email格式,例如:wzmaodong@126.com",oncorrect:"謝謝你的合作,你的email正確"}).regexValidator({regexp:"email",datatype:"enum",onerror:"email格式不正確"});

郵編:

複製程式碼 程式碼如下:

$("#yb").formValidator({onshow:"請輸入郵編",onfocus:"6位數字組成的哦",oncorrect:"謝謝你的合作,你的郵編正確"}).regexValidator({regexp :"zipcode",datatype:"enum",onerror:"郵編格式不正確"});

QQ:

複製程式碼 程式碼如下:

$("#qq").formValidator({onshow:"請輸入QQ號碼",oncorrect:"謝謝你的合作,你的QQ號碼正確"}).regexValidator({regexp:"qq",datatype:"enum ",onerror:"QQ號碼格式不正確"});

身分證:

複製程式碼 程式碼如下:

$("#sfz").formValidator({onshow:"請輸入身分證",oncorrect:"謝謝你的合作,你的身分證正確"}).regexValidator({regexp:"idcard",datatype:"enum ",onerror:"身分證格式不正確"});

字母:

複製程式碼 程式碼如下:

$("#zm").formValidator({onshow:"請輸入字母",oncorrect:"謝謝你的合作,你的字母正確"}).regexValidator({regexp:"letter",datatype:"enum", onerror:"字母格式不正確"});

大寫字母:

複製程式碼 程式碼如下:

$("#dxzm").formValidator({onshow:"請輸入大寫字母",oncorrect:"謝謝你的合作,你的大寫字母正確"}).regexValidator({regexp:"letter_u",datatype:"enum ",onerror:"大寫字母格式不正確"});

小寫字母:

複製程式碼 程式碼如下:

$("#xxzm").formValidator({onshow:"請輸入小寫字母",oncorrect:"謝謝你的合作,你的小寫字母正確"}).regexValidator({regexp:"letter_l",datatype:"enum ",onerror:"小寫字母格式不正確"});

希望本文所述對大家jQuery程式設計有所幫助。

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板