jquery.validate 사용자 정의 메소드를 사용하여 "최소 하나의 휴대폰 번호 또는 유선 전화 번호 입력"_jquery의 논리적 검증을 구현합니다.

최근 프로젝트 개발 과정에서 아래 그림과 같이 "휴대폰 번호 또는 유선전화 번호를 하나 이상 입력"해야 하는 요구 사항에 직면했습니다.

프로젝트에 사용된 jquery.validate.js 검증 컴포넌트는 현재 이런 'or' 논리 검증을 지원하지 않아 제가 직접 정의했습니다

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");

isEmpty 함수 보충:

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

오류 처리 유효성 검사 위치:

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

규칙에

사용

rules : {
        telephone : {
          phone : []
        },
        mobile : {
          phone : []
        }
      }