jQuery Validation Framework :
기본 HTML 코드:
1 <script src="js/jquery-1.9.1.js"></script> 2 <script src="js/jquery.validate.min.js"></script> 3 <script> 4 $(function () { 5 $('#myForm').validate({ 6 7 rules: { 8 // 用户名 9 username: { //指的是input中的name10 required: true,11 rangelength: [6, 11]12 },13 // 密码14 password: {15 required: true,16 rangelength: [11, 12]17 },18 },19 20 messages: {21 // 用户名22 username: {23 required: '此项必填',24 rangelength: '用户名长度为6-11位'25 },26 // 密码27 password: {28 required: '此项必填',29 rangelength: '用户名长度为11-12位'30 },
31 },32 // 校验全部通过33 submitHandler: function () {34 alert("校验全部通过！")35 },36 37 })38 })39 </script>40 41 42 html:43 <form action="" id="myForm">44 <!--用户名-->45 <p>46 <label for="user">username:</label>47 <input type="text" name="username" id="user"/>48 </p>49 <!--密码-->50 <p>51 <label for="pass">password:</label>52 <input type="text" name="password" id="pass"/>53 </p>54 <!--提交-->55 <p><input type="submit" value="提交"/></p>56 </form>위 코드에서 jQuery Validation의 사용법에 대해 이야기하겠습니다.
1.validate(options)는 선택한 폼을 검증하는데 사용됩니다. "#myForm"은 폼의 ID 이름입니다.
2.rules()는 유효성 검사의 옵션인 확인 규칙입니다. 사용자 정의 키/값 쌍 규칙입니다===키는 양식 요소의 이름 속성입니다. 값은 간단한 A 문자열이거나 규칙/매개변수 쌍으로 구성된 객체입니다.
3. 메시지()는 사용자 정의 키/값 메시지 쌍입니다. === 키는 양식 요소의 이름 속성이고 값은 표시할 메시지입니다. 양식 요소.
4.rules() 사용자 이름과 비밀번호는 입력된 이름 값입니다.
5. 필수 값이 true인 경우, 이 항목을 필수로 확인해야 합니다.
6.minlength(length)는 검증 요소의 최소 길이를 설정합니다.
7.maxlength(length) 검증 요소의 최대 길이를 설정합니다.
8.rangelength(range) 검증 요소의 길이 범위를 설정합니다.
9.max(value)는 검증 요소의 최대값을 설정합니다.
10.min(value)은 유효성 검사 요소의 최소값을 설정합니다.
11.range()는 참조 범위를 설정합니다.
12.email()은 이메일 형식이 올바른지 확인합니다.
13.url() URL 형식이 올바른지 확인하세요.
14.date()는 날짜 형식이 올바른지 확인합니다. [참고: 는 날짜의 정확성을 확인하지 않고 형식만 확인합니다]
15.submitHandler 양식이 확인을 통과하면 양식을 제출합니다.
// 校验全部通过 submitHandler: function () {
alert("校验全部通过！")
},
16.invalidHandler 유효성 검사에 실패한 양식이 제출되면 이 콜백 함수에서 몇 가지 작업을 처리할 수 있습니다.
// 校验不通过 invalidHandler: function () {
alert("no")
},
17.focusInvalid 기본값은 true입니다. 확인에 실패하면 포커스가 첫 번째 잘못된 양식 요소로 이동합니다.
18.focusCleanup기본값은 true입니다. 폼에 포커스가 오면 폼에서 errorClass를 제거하고 모든 오류 메시지를 숨깁니다. 【참고: focusInvalid와 함께 사용하지 마세요. 】
19.errorElement html 요소 유형을 사용하여 오류 메시지에 대한 컨테이너를 만듭니다. 기본적으로 라벨에 작성
20.errorClass스타일을 설정하여 오류 메시지의 스타일을 정의합니다.
21.highlight는 유효성 검사에 실패한 양식 요소에 강조 표시를 설정합니다.
highlight: function (element, errorClass) {
$(element).addClass(errorClass);
$(element).fadeOut.fadeIn();
}위 내용은 제가 접촉한 내용이며, jQuery 유효성 검사 프레임워크에 대해 더 많은 내용이 있습니다. 관심이 있으시면 jQuery.validate.js의 API를 확인하실 수 있습니다.
위 내용은 jQuery Validation 사용법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
