Detaillierte Erläuterung der benutzerdefinierten Funktionserweiterungsfunktion example_jquery des jQuery-Plug-ins formValidator

Das Beispiel in diesem Artikel beschreibt, wie die Funktionen der benutzerdefinierten Funktion formValidator des jQuery-Plug-ins erweitert werden. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Was ist das jQuery formValidator-Formularvalidierungs-Plug-in? Interessierte Leser können sich auf „jQuery formValidator-Formularvalidierungs-Plug-in“ und andere verwandte Dokumente auf dieser Website beziehen

Einige Texte werden hier weggelassen.

Die Formularanwendungen in tatsächlichen Projekten sind vielfältig, und die damit verbundene Überprüfung ist ebenfalls unterschiedlich, aber Jquery formValidator bietet uns eine benutzerdefinierte Funktionsschnittstelle, was meiner Meinung nach seine größte Stärke ist. Kommen wir ohne weitere Umschweife direkt zu den Beispielen.

Beispiel 1: Festnetz oder Mobiltelefon, wählen Sie mindestens eines aus, Sie müssen sich nicht für eines von beiden entscheiden.

Analyse: Dies ist eine Kombinationsüberprüfung, die je nach den vom Benutzer ausgewählten verschiedenen Frames unterschiedliche Überprüfungsbedingungen erfordert.

Wissenspunkt: JQuery Formvalidator bietet eine benutzerdefinierte Funktionsschnittstelle als functionValidator({ fun: funname });

Festnetz-Handy

$("#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 "座机电话格式错误";
    }
   }
  }
};

Beispiel 2: Dropdown-Liste für kaskadierende Regionen, wenn es keine Dropdown-Liste für sekundäre Regionen zum Abbrechen der Überprüfung gibt.

Provinz-, Stadt- und Regionskaskade

$("#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); //恢复校验
  }
 });
}

Häufig verwendete Verifizierung:

Ganzzahl:

Code kopieren Der Code lautet wie folgt:

$("#zs").formValidator({onshow:"Please Geben Sie eine Ganzzahl ein" ,oncorrect:"Vielen Dank für Ihre Kooperation, Ihre Ganzzahl ist korrekt"}).regexValidator({regexp:"intege",datatype:"enum",onerror:"Das Ganzzahlformat ist falsch"});

Positive Ganzzahl:

Code kopieren Der Code lautet wie folgt:

$("#zzs").formValidator({onshow:"Bitte geben Sie eine positive Ganzzahl ein",oncorrect:"Vielen Dank für Ihre Kooperation, Ihre positive Ganzzahl ist korrekt"}).regexValidator({regexp:"intege1",datatype: "enum ",onerror:"Positives Ganzzahlformat ist falsch"});

Negative ganze Zahlen:

Code kopieren Der Code lautet wie folgt:

$("#fzs").formValidator({onshow:"Bitte geben Sie eine negative Ganzzahl ein",oncorrect:"Vielen Dank für Ihre Kooperation, Ihre negative Ganzzahl ist korrekt"}).regexValidator({regexp:"intege2",datatype: "enum ",onerror:"Negatives Ganzzahlformat ist falsch"});

Positive Zahlen:

Code kopieren Der Code lautet wie folgt:

$("#zs1").formValidator({onshow:"Bitte geben Sie eine positive Zahl ein",oncorrect:"Vielen Dank für Ihre Kooperation, Ihre positive Zahl ist korrekt"}).regexValidator({regexp:"num1",datatype: "enum ",onerror:"Positives Zahlenformat ist falsch"});

Nummer:

Code kopieren Der Code lautet wie folgt:

$("#sz").formValidator({onshow:"Bitte geben Sie eine Zahl ein",oncorrect:"Vielen Dank für Ihre Mitarbeit, Ihre Zahl ist korrekt"}).regexValidator({regexp:"num",datatype:"enum ", onerror:"Das Zahlenformat ist falsch"});

Negative Zahlen:

Code kopieren Der Code lautet wie folgt:

$("#fs").formValidator({onshow:"Bitte geben Sie eine negative Zahl ein",oncorrect:"Vielen Dank für Ihre Kooperation, Ihre negative Zahl ist korrekt"}).regexValidator({regexp:"num2",datatype: "enum", onerror:"Negatives Zahlenformat ist falsch"});

Gleitkommazahl:

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

Mobiltelefon:

Code kopieren Der Code lautet wie folgt:

$("#sj").formValidator({onshow:"Bitte geben Sie Ihre Mobiltelefonnummer ein",onfocus:"Es muss mit 13 oder 15 beginnen",oncorrect:"Vielen Dank für Ihre Kooperation, Ihre Mobiltelefonnummer ist korrekt" }) .regexValidator({regexp:"mobile",datatype:"enum",onerror:"Mobiltelefonnummernformat ist falsch"});

Festnetz:

Code kopieren Der Code lautet wie folgt:

$("#dh").formValidator({onshow:"Bitte geben Sie die inländische Telefonnummer ein",onfocus:"Zum Beispiel: 0577-88888888 oder lassen Sie die Vorwahl 88888888 weg",oncorrect:"Vielen Dank für Ihre Kooperation, Ihr Inland Telefonnummer ist korrekt"}) .regexValidator({regexp:"tel",datatype:"enum",onerror:"Inländisches Telefonformat ist falsch"});

E-Mail:

Code kopieren Der Code lautet wie folgt:

$("#email").formValidator({onshow:"Bitte geben Sie Ihre E-Mail-Adresse ein",onfocus:"Bitte achten Sie auf das von Ihnen eingegebene E-Mail-Format, zum Beispiel: wzmaodong@126.com",oncorrect:"Vielen Dank für Ihre Zusammenarbeit, Sie Die E-Mail ist korrekt"}).regexValidator({regexp:"email",datatype:"enum",onerror:"email format is failed"});

Postleitzahl:

Code kopieren Der Code lautet wie folgt:

$("#yb").formValidator({onshow:"Bitte geben Sie die Postleitzahl ein",onfocus:"Sie besteht aus 6 Ziffern",oncorrect:"Vielen Dank für Ihre Mitarbeit, Ihre Postleitzahl ist korrekt"}).regexValidator ({regexp :"zipcode",datatype:"enum",onerror:"Das Postleitzahlformat ist falsch"});

QQ:

Code kopieren Der Code lautet wie folgt:

$("#qq").formValidator({onshow:"Bitte geben Sie Ihre QQ-Nummer ein",oncorrect:"Vielen Dank für Ihre Kooperation, Ihre QQ-Nummer ist korrekt"}).regexValidator({regexp:"qq",datatype: "enum ",onerror:"QQ-Nummernformat ist falsch"});

Personalausweis:

Code kopieren Der Code lautet wie folgt:

$("#sfz").formValidator({onshow:"Bitte geben Sie Ihren Personalausweis ein",oncorrect:"Vielen Dank für Ihre Mitarbeit, Ihr Personalausweis ist korrekt"}).regexValidator({regexp:"idcard",datatype: "enum ",onerror:"Das Ausweisformat ist falsch"});

Buchstabe:

Code kopieren Der Code lautet wie folgt:

$("#zm").formValidator({onshow:"Bitte geben Sie Buchstaben ein",oncorrect:"Vielen Dank für Ihre Kooperation, Ihre Buchstaben sind korrekt"}).regexValidator({regexp:"letter",datatype:"enum" , onerror:"Das Buchstabenformat ist falsch"});

Großbuchstaben:

Code kopieren Der Code lautet wie folgt:

$("#dxzm").formValidator({onshow:"Bitte geben Sie Großbuchstaben ein",oncorrect:"Vielen Dank für Ihre Kooperation, Ihre Großbuchstaben sind korrekt"}).regexValidator({regexp:"letter_u",datatype:" enum ",onerror:"Das Format der Großbuchstaben ist falsch"});

Kleinbuchstaben:

Code kopieren Der Code lautet wie folgt:

$("#xxzm").formValidator({onshow:"Bitte geben Sie Kleinbuchstaben ein",oncorrect:"Vielen Dank für Ihre Kooperation, Ihre Kleinbuchstaben sind korrekt"}).regexValidator({regexp:"letter_l",datatype:" enum ",onerror:"Das Format der Kleinbuchstaben ist falsch"});

Ich hoffe, dass dieser Artikel allen in der jQuery-Programmierung hilfreich sein wird.