jQuery 플러그인 formValidator 사용자 정의 함수 확장 함수 example_jquery에 대한 자세한 설명

이 기사의 예에서는 jQuery 플러그인 formValidator 사용자 정의 함수의 기능을 확장하는 방법을 설명합니다. 참고하실 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.

jQuery formValidator 양식 유효성 검사 플러그인이 무엇인가요? 관심 있는 독자는 이 사이트의 "jQuery formValidator 양식 유효성 검사 플러그인" 및 기타 관련 문서를 참조할 수 있습니다

여기서는 일부 내용이 생략되었습니다.

실제 프로젝트에서 폼을 적용하는 방법도 다양하고 그에 따른 검증도 다양하지만, Jquery formValidator는 사용자 정의 기능 인터페이스를 제공하는데, 이것이 개인적으로 가장 큰 장점이라고 생각합니다. 더 이상 고민하지 않고 바로 예시로 넘어가겠습니다.

예 1: 유선전화 또는 휴대폰 중 하나를 선택하세요. 둘 중 하나를 선택할 필요는 없습니다.

분석: 조합 검증으로 사용자가 선택한 프레임에 따라 검증 조건이 달라집니다.

지식 포인트: 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 "座机电话格式错误";
    }
   }
  }
};

예 2: 지역 계단식 드롭다운, 확인을 취소할 보조 지역 드롭다운이 없는 경우.

도, 도시, 지역 캐스케이드

$("#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:"Please 정수를 입력하세요." ,oncorright:"협조해 주셔서 감사합니다. 정수가 정확합니다."}).regexValidator({regexp:"intege",datatype:"enum",onerror:"정수 형식이 잘못되었습니다."});

양의 정수:

코드 복사 코드는 다음과 같습니다.

$("#zzs").formValidator({onshow:"양의 정수를 입력하세요",oncorright:"협조해 주셔서 감사합니다. 양의 정수가 정확합니다."}).regexValidator({regexp:"intege1",datatype: "enum ",onerror:"양의 정수 형식이 잘못되었습니다."});

음의 정수:

코드 복사 코드는 다음과 같습니다.

$("#fzs").formValidator({onshow:"음의 정수를 입력하세요",oncorright:"협조해 주셔서 감사합니다. 음의 정수가 정확합니다."}).regexValidator({regexp:"intege2",datatype: "enum ",onerror:"음의 정수 형식이 잘못되었습니다."});

양수:

코드 복사 코드는 다음과 같습니다.

$("#zs1").formValidator({onshow:"양수를 입력하세요",oncorright:"협조해 주셔서 감사합니다. 양수가 정확합니다."}).regexValidator({regexp:"num1",datatype: "enum ",onerror:"양수 형식이 잘못되었습니다."});

번호:

코드 복사 코드는 다음과 같습니다.

$("#sz").formValidator({onshow:"번호를 입력하세요",oncorright:"협조해 주셔서 감사합니다. 번호가 정확합니다."}).regexValidator({regexp:"num",datatype:"enum ", onerror:"숫자 형식이 잘못되었습니다."});

음수:

코드 복사 코드는 다음과 같습니다.

$("#fs").formValidator({onshow:"음수를 입력하세요",oncorright:"협조해 주셔서 감사합니다. 음수가 정확합니다."}).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로 시작해야 합니다.",oncorright:"협조해 주셔서 감사합니다. 휴대폰 번호가 정확합니다." }) .regexValidator({regexp:"mobile",datatype:"enum",onerror:"휴대폰 번호 형식이 잘못되었습니다."});

유선전화:

코드 복사 코드는 다음과 같습니다.

$("#dh").formValidator({onshow:"국내 전화번호를 입력하세요",onfocus:"예: 0577-88888888 또는 지역번호 88888888을 생략하세요",oncorcor:"협조해 주셔서 감사합니다. 전화번호가 정확합니다."}) .regexValidator({regexp:"tel",datatype:"enum",onerror:"국내 전화 형식이 잘못되었습니다."});

이메일:

코드 복사 코드는 다음과 같습니다.

$("#email").formValidator({onshow:"이메일을 입력하세요",onfocus:"입력한 이메일 형식에 주의하세요. 예: wzmaodong@126.com",oncorright:"감사합니다. 협조해 주세요. 이메일이 정확합니다."}).regexValidator({regexp:"email",datatype:"enum",onerror:"이메일 형식이 잘못되었습니다."});

우편번호:

코드 복사 코드는 다음과 같습니다.

$("#yb").formValidator({onshow:"우편번호를 입력하세요",onfocus:"6자리 숫자로 구성되어 있습니다",oncorright:"협조해 주셔서 감사합니다. 우편번호가 정확합니다"}).regexValidator ({regexp:"zipcode",datatype:"enum",onerror:"우편번호 형식이 잘못되었습니다."});

QQ：

코드 복사 코드는 다음과 같습니다.

$("#qq").formValidator({onshow:"QQ 번호를 입력하세요",oncorright:"협조해 주셔서 감사합니다. QQ 번호가 정확합니다."}).regexValidator({regexp:"qq",datatype: "enum ",onerror:"QQ 숫자 형식이 잘못되었습니다."});

신분증:

코드 복사 코드는 다음과 같습니다.

$("#sfz").formValidator({onshow:"ID 카드를 입력하세요",oncorright:"협조해 주셔서 감사합니다. ID 카드가 정확합니다."}).regexValidator({regexp:"idcard",datatype: "enum ",onerror:"신분증 형식이 잘못되었습니다."});

편지:

코드 복사 코드는 다음과 같습니다.

$("#zm").formValidator({onshow:"문자를 입력하세요",oncorright:"협조해 주셔서 감사합니다. 문자가 정확합니다."}).regexValidator({regexp:"letter",datatype:"enum" , onerror:"문자 형식이 잘못되었습니다."});

대문자:

코드 복사 코드는 다음과 같습니다.

$("#dxzm").formValidator({onshow:"대문자를 입력하세요",oncorright:"협조해 주셔서 감사합니다. 대문자가 정확합니다."}).regexValidator({regexp:"letter_u",datatype:" enum ",onerror:"대문자 형식이 잘못되었습니다."});

소문자:

코드 복사 코드는 다음과 같습니다.

$("#xxzm").formValidator({onshow:"소문자를 입력하세요",oncorright:"협조해 주셔서 감사합니다. 소문자가 정확합니다."}).regexValidator({regexp:"letter_l",datatype:" enum ",onerror:"소문자 형식이 잘못되었습니다."});

이 기사가 jQuery 프로그래밍에 종사하는 모든 사람에게 도움이 되기를 바랍니다.