Heim > Web-Frontend > js-Tutorial > Verwenden Sie die benutzerdefinierte Methode jquery.validate, um die logische Überprüfung von „Geben Sie mindestens eine Mobiltelefonnummer oder Festnetznummer ein'_jquery zu implementieren

Verwenden Sie die benutzerdefinierte Methode jquery.validate, um die logische Überprüfung von „Geben Sie mindestens eine Mobiltelefonnummer oder Festnetznummer ein'_jquery zu implementieren

WBOY
Freigeben: 2016-05-16 16:38:12
Original
1370 Leute haben es durchsucht

Bei der jüngsten Projektentwicklung sind wir auf die Anforderung gestoßen, „mindestens eine Mobiltelefonnummer oder Festnetznummer einzugeben“, wie in der folgenden Abbildung dargestellt:

Die im Projekt verwendete Verifizierungskomponente jquery.validate.js unterstützt diese Art der „Oder“-Logiküberprüfung derzeit nicht, daher habe ich selbst eine definiert

jQuery.validator.addMethod("phone", function(value, element) {
      var mobile = $("#mobile").val();// 手机号码
      var telephone = $("#telephone").val();// 固定电话
      var mobileRule = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0-9]|170)\d{8}$/;
      var telephoneRule = /^\d{3,4}-?\d{7,9}$/;

      // 都没填
      if (isEmpty(mobile) && isEmpty(telephone)) {
        //自定义错误提示
        $("#receivingMobile_tip").addClass("errorHint").text("请填写固定电话或手机号码");
        return false;
      }
      var mobilePass = false;
      var telephonePass = false;
      // 手机填了、固定电话没填
      if (!isEmpty(mobile) && isEmpty(telephone)) {
        if (!mobileRule.test(mobile)) {
          //自定义错误提示
          $("#receivingMobilePhone_tip").removeClass("successHint").addClass("errorHint").text("手机号码格式不对");
          return false;
        } else {
          mobilePass = true;
        }
      }

      // 手机没填、固定电话填了
      if (isEmpty(mobile) && !isEmpty(telephone)) {
        if (!telephoneRule.test(telephone)) {
          //自定义错误提示
          $("#receivingTelephone_tip").removeClass("successHint").addClass("errorHint").text("固定电话格式不对");
          return false;
        } else {
          telephonePass = true;
        }
      }

      if (mobilePass || telephonePass) {
        //自定义成功提示
        $("#receivingTelephone_tip").removeClass("errorHint").addClass("successHint").text('');
        return true;
      } else {
        return false;
      }
    }, "ignore");
Nach dem Login kopieren

IsEmpty-Funktion ergänzen:

 // 空字符串判断
function isEmpty(v, allowBlank) {
   return v === null || v === undefined || (!allowBlank ? v === "" : false);
}
Nach dem Login kopieren

HandhabungsfehlerPlatzierung der Validierung:

errorPlacement : function(error, element) {
        //忽略自定义的方法错误提示
        if (error.text() == "ignore") {
          return;
        }
         
      }
Nach dem Login kopieren


Verwenden Sie

in Regeln
rules : {
        telephone : {
          phone : []
        },
        mobile : {
          phone : []
        }
      }
Nach dem Login kopieren

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage