jQuery Validate 관련 매개 변수 및 사용자 정의 인증 규칙

Jquery Validate 관련 매개 변수

//      
var cnmsg = {
required: “    ”,
remote: “      ”,
email: “            ”,
url: “        ”,
date: “        ”,
dateISO: “         (ISO).”,
number: “        ”,
digits: “      ”,
creditcard: “          ”,
equalTo: “         ”,
accept: “              ”,
maxlength: jQuery.format(“           {0}     ”),
minlength: jQuery.format(“           {0}     ”),
rangelength: jQuery.format(“          {0}   {1}       ”),
range: jQuery.format(“        {0}   {1}     ”),
max: jQuery.format(“         {0}   ”),
min: jQuery.format(“         {0}   ”)
};
jQuery.extend(jQuery.validator.messages, cnmsg);

Jquery Validate 인증 규칙
(1)required:true 필수 필드
(2)remote:"check.PHP"ajax 방법 으로 check.php 를 호출 하여 입력 값 을 검증 합 니 다.
(3)이메일:true 올 바른 형식의 이메일 을 입력 해 야 합 니 다.
(4)url:true 는 정확 한 형식의 인터넷 주 소 를 입력 해 야 합 니 다.
(5)date:true 정확 한 형식의 날 짜 를 입력 해 야 합 니 다.
(6)dateISO:true 는 정확 한 형식의 날짜(ISO)를 입력 해 야 합 니 다.예 를 들 어 2009-06-23,1998/01/22 는 형식 만 검증 하고 유효성 을 검증 하지 않 습 니 다.
(7)number:true 는 합 법 적 인 숫자(음수,소수)를 입력 해 야 합 니 다.
(8)digits:true 는 정 수 를 입력 해 야 합 니 다.
(9)creditcard:합 법 적 인 신용카드 번 호 를 입력 해 야 합 니 다.
(10)equalTo:"\#field"입력 값 은\#field 와 같 아야 합 니 다.
(11)accept:합 법 적 인 접미사 이름 을 가 진 문자열 을 입력 하 십시오.(파일 을 업로드 할 접미사)
(12)maxlength:5 입력 길이 가 최대 5 인 문자열(한 자 는 한 글자 로 계산)
(13)minlength:10 입력 길이 가 최소 10 인 문자열(한 자 는 한 글자 로 계산)
(14)rangelength:[5,10]입력 길 이 는 5 와 10 사이 의 문자열 이 어야 합 니 다.(한 자 는 한 글자 로 계산 합 니 다)
(15)range:[5,10]입력 값 은 5 와 10 사이 여야 합 니 다.
(16)max:5 입력 치가 5 보다 크 면 안 됩 니 다
(17)min:10 입력 값 은 10 보다 작 으 면 안 됩 니 다.
Jquery Validate 사용자 정의 인증 규칙
addMethod(name,method,message)방법:
인자 name 은 추가 방법의 이름 입 니 다.
매개 변수 method 는 하나의 함수 로 세 개의 매개 변수(value,element,param)value 를 받 는 것 은 요소 의 값 이 고 element 는 요소 자체 param 입 니 다.
매개 변수 입 니 다.우 리 는 addMethod 로 built-in Validation methods 를 제외 한 인증 방법 을 추가 할 수 있 습 니 다.예 를 들 어 한 필드 만 있 습 니 다.
한 자 모 를 질 수 있 습 니 다.범 위 는 a-f 입 니 다.쓰 는 방법 은 다음 과 같 습 니 다.

$.validator.addMethod(“af”,function(value,element,params){
if(value.length>1){
return false;
}
if(value>=params[0] && value<=params[1]){
return true;
}else{
return false;
}
},”       , a-f”);

사용 할 때,예 를 들 어 폼 필드 의 id="username"은 rules 에 적 습 니 다.

username:{
af:["a","f"]
}

방법.
addMethod 의 첫 번 째 매개 변 수 는 인증 방법의 이름 을 추가 하 는 것 입 니 다.이 때 는 af 입 니 다.
addMethod 의 세 번 째 매개 변 수 는 사용자 정의 오류 알림 입 니 다.이 힌트 는"알파벳 이 어야 하고 a-f"입 니 다.
addMethod 의 두 번 째 매개 변 수 는 함수 입 니 다.이것 은 비교적 중요 합 니 다.이 검증 방법 을 사용 할 때의 쓰기 방법 을 결정 합 니 다.
만약 에 하나의 매개 변수 만 있 으 면 직접 쓰 세 요.만약 에 af:"a"라면 a 는 이 유일한 매개 변수 입 니 다.만약 에 여러 개의 매개 변 수 를[]에 사용 하면 쉼표 로 구분 합 니 다.
Jquery Validate submit 제출

submitHandler:           ,             ,        
$(".selector").validate({ submitHandler:function(form) { $(form).ajaxSubmit(); // Jquery Form    } })
Jquery Validate error     dom
.errorPlacement：Callback Default:               
         ，     ：error.appendTo(element.parent());               
errorPlacement: function(error, element) {
error.appendTo(element.parent());
}

잘못된 알림 스타일 을 설정 하면 아이콘 표 시 를 추가 할 수 있 습 니 다.like:

input.error { border: 1px solid red; }
label.error {
background:url(“./demo/images/unchecked.gif”) no-repeat 0px 0px;
padding-left: 16px;
padding-bottom: 2px;
font-weight: bold;
color: #EA5200;
}

부록:자주 사용 하 는 사용자 정의 인증 규칙

//     
jQuery.validator.addMethod(“stringCheck”, function(value, element) {
return this.optional(element) || /^[u0391-uFFE5w]+$/.test(value);
}, ”       、    、      ”);
//        
jQuery.validator.addMethod(“byteRangeLength”, function(value, element, param) {
var length = value.length;
for(var i = 0; i < value.length; i++){
if(value.charCodeAt(i) > 127){
length++;
}
}
return this.optional(element) || ( length >= param[0]&&length <= param[1] );
}, ”        3-15     (      2   )”);
//        
jQuery.validator.addMethod(“isIdCardNo”, function(value, element) {
return this.optional(element) || isIdCardNo(value);
}, ”            ”);
//       
jQuery.validator.addMethod(“isMobile”, function(value, element) {
var length = value.length;
var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+d{8})$/;
return this.optional(element) || (length == 11 && mobile.test(value));
}, ”           ”);
//       
jQuery.validator.addMethod(“isTel”, function(value, element) {
var tel = /^d{3,4}-?d{7,9}$/; //      010-12345678
return this.optional(element) || (tel.test(value));
}, ”           ”);
//     (  /    )  
jQuery.validator.addMethod(“isPhone”, function(value,element) {
var length = value.length;
var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+d{8})$/;
var tel = /^d{3,4}-?d{7,9}$/;
return this.optional(element) || (tel.test(value) || mobile.test(value));
}, ”           ”);
//       
jQuery.validator.addMethod(“isZipCode”, function(value, element) {
var tel = /^[0-9]{6}$/;
return this.optional(element) || (tel.test(value));
}, ”           ”);
function isIdCardNo(num) {
var factorArr = new Array(7,9,10,5,8,4,2,1,6,3,7,9,10,5,8,4,2,1);
var parityBit=new Array(“1″,”0″,”X”,”9″,”8″,”7″,”6″,”5″,”4″,”3″,”2″);
var varArray = new Array();
var intValue;
var lngProduct = 0;
var intCheckDigit;
var intStrLen = num.length;
var idNumber = num;
// initialize
if ((intStrLen != 15) && (intStrLen != 18)) {
return false;
}
// check and set value
for(i=0;i<intStrLen;i++) {
varArray[i] = idNumber.charAt(i);
if ((varArray[i] < '0′ || varArray[i] > '9′) && (i != 17)) {
return false;
} else if (i < 17) {
varArray[i] = varArray[i] * factorArr[i];
}
}
if (intStrLen == 18) {
//check date
var date8 = idNumber.substring(6,14);
if (isDate8(date8) == false) {
return false;
}
// calculate the sum of the products
for(i=0;i<17;i++) {
lngProduct = lngProduct + varArray[i];
}
// calculate the check digit
intCheckDigit = parityBit[lngProduct % 11];
// check last digit
if (varArray[17] != intCheckDigit) {
return false;
}
}
else{ //length is 15
//check date
var date6 = idNumber.substring(6,12);
if (isDate6(date6) == false) {
return false;
}
}
return true;
}
function isDate6(sDate) {
if(!/^[0-9]{6}$/.test(sDate)) {
return false;
}
var year, month, day;
year = sDate.substring(0, 4);
month = sDate.substring(4, 6);
if (year < 1700 || year > 2500) return false
if (month < 1 || month > 12) return false
return true
}
function isDate8(sDate) {
if(!/^[0-9]{8}$/.test(sDate)) {
return false;
}
var year, month, day;
year = sDate.substring(0, 4);
month = sDate.substring(4, 6);
day = sDate.substring(6, 8);
var iaMonthDays = [31,28,31,30,31,30,31,31,30,31,30,31]
if (year < 1700 || year > 2500) return false
if (((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0)) iaMonthDays[1]=29;
if (month < 1 || month > 12) return false
if (day < 1 || day > iaMonthDays[month - 1]) return false
return true
}
//         
jQuery.validator.addMethod(“idcardno”, function(value, element) {
return this.optional(element) || isIdCardNo(value);
}, “          ”);
//    
jQuery.validator.addMethod(“alnum”, function(value, element) {
return this.optional(element) || /^[a-zA-Z0-9]+$/.test(value);
}, “           ”);
//       
jQuery.validator.addMethod(“zipcode”, function(value, element) {
var tel = /^[0-9]{6}$/;
return this.optional(element) || (tel.test(value));
}, “         ”);
//   
jQuery.validator.addMethod(“chcharacter”, function(value, element) {
var tel = /^[u4e00-u9fa5]+$/;
return this.optional(element) || (tel.test(value));
}, “     ”);
//         （         2）
jQuery.validator.addMethod(“stringMinLength”, function(value, element, param) {
var length = value.length;
for ( var i = 0; i < value.length; i++) {
if (value.charCodeAt(i) > 127) {
length++;
}
}
return this.optional(element) || (length >= param);
}, $.validator.format(“      {0}!”));
//         （         2）
jQuery.validator.addMethod(“stringMaxLength”, function(value, element, param) {
var length = value.length;
for ( var i = 0; i < value.length; i++) {
if (value.charCodeAt(i) > 127) {
length++;
}
}
return this.optional(element) || (length <= param);
}, $.validator.format(“      {0}!”));
//     
jQuery.validator.addMethod(“string”, function(value, element) {
return this.optional(element) || /^[u0391-uFFE5w]+$/.test(value);
}, “         !”);
//       
jQuery.validator.addMethod(“mobile”, function(value, element) {
var length = value.length;
return this.optional(element) || (length == 11 && /^(((13[0-9]{1})|(15[0-9]{1}))+d{8})$/.test(value));
}, “        !”);
//       
jQuery.validator.addMethod(“phone”, function(value, element) {
var tel = /^(d{3,4}-?)?d{7,9}$/g;
return this.optional(element) || (tel.test(value));
}, “        !”);
//       
jQuery.validator.addMethod(“zipCode”, function(value, element) {
var tel = /^[0-9]{6}$/;
return this.optional(element) || (tel.test(value));
}, “        !”);
//             
jQuery.validator.addMethod(“begin”, function(value, element, param) {
var begin = new RegExp(“^” + param);
return this.optional(element) || (begin.test(value));
}, $.validator.format(“    {0}   !”));
//             
jQuery.validator.addMethod(“notEqualTo”, function(value, element, param) {
return value != $(param).val();
}, $.validator.format(“        !”));
//             
jQuery.validator.addMethod(“notEqual”, function(value, element, param) {
return value != param;
}, $.validator.format(“       {0}!”));
//           (    )
jQuery.validator.addMethod(“gt”, function(value, element, param) {
return value > param;
}, $.validator.format(“       {0}!”))
;

사례 1:

<style type="text/css">
* { font-family: Verdana; font-size: 96%; }
label { width: 10em; float: left; }
label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
p { clear: both; }
.submit { margin-left: 12em; }
em { font-weight: bold; vertical-align: top;width: 22px; display: inline-block; }
i.error {background:url("images/unchecked.gif") no-repeat 0px 0px;padding-left: 16px;font-style: inherit;}
i.success {background:url("images/checked.gif") no-repeat 0px 0px; padding-left: 16px;font-style: inherit;}
input{width: 230px;}
</style>
 <script type="text/javascript">
 $(document).ready(function(){
//         
$.validator.addMethod(
"formula", //      
function(value, element, param) {//    
return value == eval(param);
}, 
'               '//      
);
$("#commentForm").validate({
rules: {
username: {
required: true,
minlength: 2
},
email: {
required: true,
email: true
},
url:"url",
comment: "required",
valcode: {
formula: "7+9"
}
},
messages: {
username: {
required: '     ',
minlength: '         '
},
email: {
required: '       ',
email: '          '
},
url: '        ',
comment: '       '
}, 
errorElement: "i",
//            
success: function(label) {
//             
//label              em
label.text(" ")
//        
.addClass("success");
//      success 
}
 });
 });
 </script>
 <form class="cmxform" id="commentForm" method="get" action="">

<legend>                 </legend>
  <p>
   <label for="cusername">  </label>
   <em>*</em><input id="cusername" name="username" size="25" />
  </p>
  <p>
   <label for="cemail">    </label>
   <em>*</em><input id="cemail" name="email" size="25" />
  </p>
  <p>
   <label for="curl">  </label>
   <em>  </em><input id="curl" name="url" size="25" value="" />
  </p>
  <p>
   <label for="ccomment">    </label>
   <em>*</em><textarea id="ccomment" name="comment" cols="22"></textarea>
  </p>
  <p>
   <label for="cvalcode">   </label>
   <em> </em><input id="cvalcode" name="valcode" size="25" value="" />=7+9
  </p>
  <p>
   <input class="submit" type="submit" value="  "/>
  </p>
 </form>

위 에서 말 한 것 은 소 편 이 소개 한 jQuery Validate 관련 매개 변수 와 자주 사용 하 는 사용자 정의 검증 규칙 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.소 편 은 제때에 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!