jQuery 유효성 검사 플러그인에 대한 자세한 설명

1. Validate 플러그인 설명

Validate는 jQuery를 기반으로 한 가벼운 유효성 검사 플러그인입니다. 여기에는 풍부한 내장 유효성 검사 규칙과 유연한 사용자 정의 규칙 인터페이스가 있어 HTML, CSS 및 JS 간의 결합이 적습니다. 레이아웃 및 풍부한 스타일은 입력, 선택 및 텍스트 영역 확인을 지원합니다.

2. 구성 방법

Jquery 라이브러리를 먼저 가져온 다음 Validate 플러그인을 가져와야 합니다. 그리고 두 플러그인에는 일정한 순서가 있습니다. (jquery library-Validate 플러그인)

<script type="text/javascript" src="js/jquery-1.9.1.js?1.1.10" ></script>
<script type="text/javascript" src="js/jquery.validate.min.js?1.1.10" ></script>

js 코드는 다음과 같습니다.

<script type="text/javascript">
$(function(){
$(&#39;#demoForm&#39;).validate({
rules:{
//指的是input 的 name的名字
username:{
required:true,
minlength:6,
maxlength:9
},
password:{
required:true,
minlength:6,
maxlength:9
},
age:{
min:18,
max:80,
//range:[18,80],
//r                         angelength:[2,3],
digits:true
},
date:{
required:true,
dateISO:true,
}
},
messages:{
username:{
required:&#39;此项必填&#39;,
minlength:&#39;用户名最小是6位&#39;,
maxlength:&#39;用户名最大是9位&#39;
},
password:{
required:&#39;此项必填&#39;,
minlength:&#39;密码最小是6位&#39;,
maxlength:&#39;密码最大是9位&#39;
},
age:{
min:&#39;最小18岁&#39;,
max:&#39;最大80岁&#39;,
//range:&#39;年龄必须是18-80之间&#39;,
//                          rangelength:&#39;2-3位数&#39;,
digits:&#39;年龄必须是正整数&#39;
},
date:{
required:&#39;必填&#39;,
dateISO:&#39;日期格式不合法&#39;
}
}
})
})
</script>

html 코드는 다음과 같습니다.

<form id="demoForm">
<p>
<label for="user">username</label>
<input type="text" name="username" id="user"/>
</p>
<p>
<label for="pass">password</label>
<input type="text" name="password" id="pass"/>
</p>
<p>
<label for="age">age</label>
<input type="text" name="age" id="age"/>
</p>
<p>
<label for="date">date</label>
<input type="text" name="date" id="date"/>
</p>
<p>
<input type="submit" value="提交" id="btn"/>
</p>
</form>

코드 설명:

$('#demoForm').validate({}) 검증을 호출하는 양식 요소

규칙: 요소의 확인 규칙을 반환합니다. 기본 오류 메시지는 영어입니다.

메시지는 규칙을 사용자 정의할 수 있습니다.

기본 확인 규칙:

1	required:true	필수 필드입니다.
2	remote:"check.php"	ajax 메소드를 사용하여 check.php를 호출하여 입력값을 확인합니다.
3	email:true	올바른 형식의 이메일을 입력해야 합니다.
4	url:true	URL을 올바른 형식으로 입력해야 합니다.
5	date:true	날짜는 올바른 형식으로 입력해야 합니다. 날짜 확인(ie6 오류), 주의해서 사용하세요.
6	dateISO:true	날짜(ISO)를 올바른 형식으로 입력해야 합니다(예: 2009-06-23, 1998/01/22). 유효성은 확인되지 않고 형식만 확인됩니다.
7	숫자:true	적법한 숫자(음수, 소수)를 입력해야 합니다.
8	digits:true	정수를 입력해야 합니다.
9	신용카드:	적법한 신용카드 번호를 입력해야 합니다.
10	equalTo:"#field"	입력 값은 #field와 동일해야 합니다.
11	accept:	법적 접미사(업로드된 파일의 접미사)가 포함된 문자열을 입력하세요.
12	최대 길이:5	최대 길이가 5자(한자는 1자로 계산)의 문자열을 입력하세요.
13	minlength:10	최소 10자 이상의 문자열을 입력하세요(한자는 1자로 계산됩니다).
14	rangelength:[5,10]	입력 길이는 5~10자 사이여야 합니다(한자는 1자로 계산됩니다).
15	범위:[5,10]	입력 값은 5에서 10 사이여야 합니다.
16	max:5	입력 값은 5보다 클 수 없습니다.
17	min:10	입력값은 10보다 작을 수 없습니다.

위 내용은 jQuery 유효성 검사 플러그인에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!