jQuery.Validate 사용 참고 사항(jQuery 유효성 검사 예)

jQuery.Validate 사용 참고 사항(jQuery 유효성 검사 예)_jquery

WBOY

풀어 주다： 2016-05-16 18:24:31

원래의

1020명이 탐색했습니다.

유효성 검사 작업 클래스 formValidatorClass.js

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

 
/** 
* @author ming 
 */ 
$(document).ready(function(){ 
/**//* 기본 속성 설정*/ 
$.validator.setDefaults({ 
submitHandler: function(form) { 
 form.submit(); 
} 
}); 
// 문자 유효성 검사
jQuery.validator.addMethod("stringCheck", function(value, element) { 
return this.ional (element) || /^[u0391-uFFE5w] $/.test(value); 
}, "한자, 영문자, 숫자, 밑줄만 포함할 수 있습니다."); 한자 Byte
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.ional(element) || = param[0] && length <= param[1] ) 
}, "입력한 값은 3~15바이트(한자 1개는 2바이트로 계산)인지 확인하세요."); /신분증 번호 확인
jQuery.validator.addMethod("isIdCardNo", function(value, element) { 
return this.ional(element) || isIdCardNo(value); 
}, "를 입력하세요. ID 번호를 올바르게 입력하세요"); 
//휴대폰 번호 확인
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.ional(element ) || (length == 11 && mobile.test(value)) 
}, "휴대폰번호를 정확하게 입력해주세요.") 
// 전화번호 확인
jQuery.validator.addMethod( "isTel ", function(value, element) { 
var tel = /^d{3,4}-?d{7,9}$/; //전화번호 형식 010-12345678 
 이것을 반환합니다. 선택 사항( 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.선택 사항( element) || (tel.test(value) || mobile.test(value)); 
}, "연락처를 정확하게 입력해주세요.") 
// 우편번호 확인
jQuery . validator.addMethod("isZipCode", function(value, element) { 
var tel = /^[0-9]{6}$/; 
return this.ional(element) || (tel.test (값)); 
}, "우편번호를 정확하게 입력해주세요.") 
//확인 시작
$('#submitForm').validate({ 
/**//* 유효성 검사 규칙 설정*/ 
규칙: { 
사용자 이름: { 
필수:true, 
stringCheck:true, 
byteRangeLength:[3,15] 
}, 
이메일: { 
필수:true, 
이메일:true 
}, 
전화:{ 
필수:true, 
isPhone:true 
}, 
주소:{ 
required:true, 
stringCheck:true, 
byteRangeLength:[3,100] 
} 
}, 
/**//* 오류 메시지 설정*/ 
메시지: { 
 사용자 이름 : { 
필수: "사용자 이름을 입력하세요.", 
stringCheck: "사용자 이름에는 중국어, 영문자, 숫자, 밑줄만 사용할 수 있습니다.", 
byteRangeLength: "사용자 이름은 3~3자 사이여야 합니다. 15자(한자 1자는 2자로 간주)" 
}, 
이메일:{ 
필수: "이메일 주소를 입력하세요.", 
이메일: "유효한 이메일 주소를 입력하세요." 
}, 
phone:{ 
필수: "연락처 번호를 입력하세요.", 
isPhone: "유효한 연락처를 입력하세요." 
}, 
주소:{ 
 필수: "연락처 주소를 입력하세요.", 
stringCheck: "연락처 주소를 올바르게 입력하세요.", 
byteRangeLength: "연락처를 입력해 주세요." 
} 
} , 
/**//* 확인 트리거 이벤트 설정*/ 
focusInvalid: false, 
onkeyup: false, 
/**//* 오류 메시지 프롬프트 DOM 설정*/ 
errorPlacement: 함수(오류, 요소) { 
error.appendTo( element.parent()); 
}, 
}) 

 
테스트 페이지 색인 

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

"http://www.w3.org/TR/html4/loose.dtd"> ;

<머리>

jQuery验证

<본문>

校验规则参数
格式为; name:{rule1, rule2 ....} name 要使用input 标签的name，之前，错误理解为 ID 了;
提示信息使用 Alert 输流:

复aze代码代码如下:

 
errorPlacement: function (error, element) { 
if (error[0].textContent){ 
Alert (오류[0].textContext); 
} 
else { 
Alert(error[0].innerText); 
} 
} 