Explication détaillée de la fonction d'extension de fonction personnalisée formValidator du plug-in jQuery example_jquery

L'exemple de cet article décrit comment étendre les fonctions de la fonction personnalisée formValidator du plug-in jQuery. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Qu'est-ce que le plug-in de validation de formulaire jQuery formValidator ? Les lecteurs intéressés peuvent se référer au "plug-in de validation de formulaire jQuery formValidator" et à d'autres documents connexes sur ce site

Certains textes sont omis ici.

Les applications de formulaire dans les projets réels sont diverses, et la vérification qui l'accompagne est également variée, mais Jquery formValidator nous fournit une interface de fonction personnalisée, ce qui, je pense personnellement, est sa principale force. Sans plus attendre, passons directement aux exemples.

Exemple 1 : Téléphone fixe ou mobile, choisissez-en au moins un, vous n'êtes pas obligé de choisir non plus.

Analyse : Il s'agit d'une vérification combinée, qui nécessite différentes conditions de vérification en fonction des différentes trames sélectionnées par l'utilisateur.

Point de connaissance : Jquery formvalidator fournit une interface de fonction personnalisée en tant que functionValidator({ fun: funname });

Téléphone mobile fixe

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

Exemple 2 : liste déroulante en cascade de régions, lorsqu'il n'y a pas de liste déroulante de régions secondaires pour annuler la vérification.

Cascade province, ville et région

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

Vérification couramment utilisée :

Entier :

Copier le code Le code est le suivant :

$("#zs").formValidator({onshow:"S'il vous plaît entrez un entier" ,oncorrect:"Merci pour votre coopération, votre entier est correct"}).regexValidator({regexp:"intege",datatype:"enum",onerror:"Le format entier est incorrect"});

Entier positif :

Copier le code Le code est le suivant :

$("#zzs").formValidator({onshow:"Veuillez saisir un entier positif",oncorrect:"Merci pour votre coopération, votre entier positif est correct"}).regexValidator({regexp:"intege1",datatype : "enum ",onerror:"Le format entier positif est incorrect"});

Entiers négatifs :

Copier le code Le code est le suivant :

$("#fzs").formValidator({onshow:"Veuillez saisir un entier négatif",oncorrect:"Merci pour votre coopération, votre entier négatif est correct"}).regexValidator({regexp:"intege2",datatype : "enum ",onerror:"Le format de l'entier négatif est incorrect"});

Chiffres positifs :

Copier le code Le code est le suivant :

$("#zs1").formValidator({onshow:"Veuillez saisir un nombre positif",oncorrect:"Merci pour votre coopération, votre nombre positif est correct"}).regexValidator({regexp:"num1",datatype : "enum ",onerror:"Le format des nombres positifs est incorrect"});

Numéro :

Copier le code Le code est le suivant :

$("#sz").formValidator({onshow:"Veuillez saisir un numéro",oncorrect:"Merci pour votre coopération, votre numéro est correct"}).regexValidator({regexp:"num",datatype:"enum ", onerror:"Le format numérique est incorrect"});

Nombres négatifs :

Copier le code Le code est le suivant :

$("#fs").formValidator({onshow:"Veuillez saisir un nombre négatif",oncorrect:"Merci pour votre coopération, votre nombre négatif est correct"}).regexValidator({regexp:"num2",datatype : "enum", onerror : "Le format des nombres négatifs est incorrect"});

Numéro à virgule flottante :

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

Téléphone portable :

Copier le code Le code est le suivant :

$("#sj").formValidator({onshow:"Veuillez saisir votre numéro de téléphone portable",onfocus:"Il doit commencer par 13 ou 15",oncorrect:"Merci pour votre coopération, votre numéro de téléphone portable est correct" }) .regexValidator({regexp:"mobile",datatype:"enum",onerror:"Le format du numéro de téléphone portable est incorrect"});

Téléphone fixe :

Copier le code Le code est le suivant :

$("#dh").formValidator({onshow:"Veuillez saisir le numéro de téléphone national",onfocus:"Par exemple : 0577-88888888 ou omettez l'indicatif régional 88888888",oncorrect:"Merci pour votre coopération, votre le numéro de téléphone est correct"}) .regexValidator({regexp:"tel",datatype:"enum",onerror:"Le format du téléphone domestique est incorrect"});

E-mail :

Copier le code Le code est le suivant :

$("#email").formValidator({onshow:"Veuillez saisir votre email",onfocus:"Veuillez faire attention au format d'e-mail que vous saisissez, par exemple : wzmaodong@126.com",oncorrect:"Merci pour votre coopération, vous L'e-mail est correct"}).regexValidator({regexp:"email",datatype:"enum",onerror:"email format is incorrect"});

Code postal :

Copier le code Le code est le suivant :

$("#yb").formValidator({onshow:"Veuillez saisir le code postal",onfocus:"Il se compose de 6 chiffres",oncorrect:"Merci pour votre coopération, votre code postal est correct"}).regexValidator ({regexp :"zipcode",datatype:"enum",onerror:"Le format du code postal est incorrect"});

QQ：

Copier le code Le code est le suivant :

$("#qq").formValidator({onshow:"Veuillez saisir votre numéro QQ",oncorrect:"Merci pour votre coopération, votre numéro QQ est correct"}).regexValidator({regexp:"qq",datatype : "enum ",erreur :"Le format du numéro QQ est incorrect"});

Carte d'identité :

Copier le code Le code est le suivant :

$("#sfz").formValidator({onshow:"Veuillez saisir votre carte d'identité",oncorrect:"Merci pour votre coopération, votre carte d'identité est correcte"}).regexValidator({regexp:"idcard",datatype : "enum ",onerror:"Le format de la carte d'identité est incorrect"});

Lettre :

Copier le code Le code est le suivant :

$("#zm").formValidator({onshow:"Veuillez saisir des lettres",oncorrect:"Merci pour votre coopération, vos lettres sont correctes"}).regexValidator({regexp:"letter",datatype:"enum" , une erreur : "Le format de la lettre est incorrect"});

Lettres majuscules :

Copier le code Le code est le suivant :

$("#dxzm").formValidator({onshow:"Veuillez saisir des majuscules",oncorrect:"Merci pour votre coopération, vos majuscules sont correctes"}).regexValidator({regexp:"letter_u",datatype:" enum ",onerror:"Le format des majuscules est incorrect"});

Lettres minuscules :

Copier le code Le code est le suivant :

$("#xxzm").formValidator({onshow:"Veuillez saisir des lettres minuscules",oncorrect:"Merci pour votre coopération, vos lettres minuscules sont correctes"}).regexValidator({regexp:"letter_l",datatype:" enum ",onerror:"Le format des lettres minuscules est incorrect"});

J'espère que cet article sera utile à tous ceux qui programment jQuery.