jQuery는 HTML 파일 탐색, 이벤트 처리, 애니메이션 및 Ajax 상호 작용을 단순화하여 웹 페이지 제작의 신속한 개발을 촉진하는 빠르고 간단한 JavaScript 라이브러리입니다. jQuery는 JavaScript 작성 방식을 변경하도록 설계되었습니다.
jQuery Validate 플러그인은 양식에 대한 강력한 유효성 검사 기능을 제공하여 클라이언트 측 양식 유효성 검사를 더 쉽게 만듭니다.
하지만 배우는 과정에서 의문점도 발견했습니다. 인터넷에 있는 많은 예제는 jquery.metadata.js 라이브러리에 의존하는 것 같은데, 클래스 자체가 The입니다. 프리젠테이션 스타일에는 다양한 검증 규칙이 첨부되어 있어 다소 지저분해 보입니다. 그렇다면 jquery.metadata.js에 의존하지 않는 경우 어떻게 작성해야 할까요?
1. jquery.js(특정 버전은 직접 선택)와 jquery.validate.js만 소개하세요
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | <!DOCTYPE html>
<html>
<head>
<script src="js/jquery.js"></script>
<script src="js/jquery.validate.js"></script>
<script>
$().ready(function() {
$("#registerForm").validate();
});
</script>
</head>
<body>
<form id="registerForm" method="get" action="">
<fieldset>
<p>
<label for="cusername">用户名</label>
<input id="cusername" name="username" type="text" required="true" rangelength="[2,10]">
</p>
<p>
<label for="cpassword">密码</label>
<input id="cpassword" name="password" type="password" required="true" minlength="6">
</p>
<p>
<label for="cconfirmpassword">确认密码</label>
<input id="cconfirmpassword" name="confirmpassword" type="password" required="true" equalTo="#cpassword">
</p>
<p>
<label for="cemail">邮箱</label>
<input id="cemail" name="email" required="true" email="true"> </input>
</p>
<p>
<input type="submit" value="提交">
</p>
</fieldset>
</form>
</body>
</html>
|
로그인 후 복사
위 JS 파일 2개만 도입하면 간단한 폼 검증이 완료될 수 있음이 밝혀졌습니다.
2. 다만, 기본 프롬프트 정보가 영어로 되어 있기 때문에, 친근한 프롬프트를 위해서는 다음으로 프롬프트 정보를 중국어로 표시해 주어야 합니다.
방법 1. 자바스크립트를 통해 프롬프트 정보를 맞춤화합니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 | <!DOCTYPE html>
<html>
<head>
<script src="js/jquery.js"></script>
<script src="js/jquery.validate.js"></script>
<script>
$().ready(function() {
$("#registerForm").validate({
rules : {
username : {
required : true,
rangelength:[2,10]
},
password : {
required : true,
minlength:6
},
confirmpassword : {
required : true,
equalTo:"#cpassword"
},
email : {
required : true,
email : true
}
},
messages : {
username : {
required : '请输入姓名',
rangelength:'长度在 {0} 到 {1} 之间'
},
password : {
required : '请输入密码',
minlength:'密码不能少于 {0}位'
},
confirmpassword : {
required : '请再次输入密码',
equalTo:'两次输入的密码不一致'
},
email : {
required :'请输入邮箱',
email : '请输入有效的电子邮件地址'
}
}
});
});
</script>
</head>
<body>
<form id="registerForm" method="get" action="">
<fieldset>
<p>
<label for="cusername">用户名</label>
<input id="cusername" name="username" type="text"/>
</p>
<p>
<label for="cpassword">密码</label>
<input id="cpassword" name="password" type="password"/>
</p>
<p>
<label for="cconfirmpassword">确认密码</label>
<input id="cconfirmpassword" name="confirmpassword" type="password"/>
</p>
<p>
<label for="cemail">邮箱</label>
<input id="cemail" name="email" type="email"/>
</p>
<p>
<input type="submit" value="提交">
</p>
</fieldset>
</form>
</body>
</html>
|
로그인 후 복사
먼저 메소드 호출이 있습니다: $("#registerForm").validate([options]) 이는 선택을 확인하는 데 사용되는 양식입니다. 메소드의 매개변수는 선택사항이며 0개 이상의 키 값을 입력할 수 있습니다. (키/값)의 경우 이 메소드는 제출, 포커스, 키업, 흐림, 유효성 검사를 트리거하는 클릭 등을 처리하는 것입니다. 유효성 검사를 위한 요소를 정의하고 errorClass , errorElement, Wrapper, errorLabelContainer, errorContainer, showErrors, Success, errorPlacement,highlight, unhighlight,ignoreTitle을 사용하여 잘못된 요소에 대한 오류 메시지 표시를 제어합니다. 그 중 규칙에 0개 이상의 키-값 쌍을 입력할 수도 있으며, 해당 키는 사용자 이름, 비밀번호 확인 등과 같은 요소의 이름 속성 값에 해당합니다. 그리고 그 값에는 몇 가지 검증 규칙이 포함되어 있습니다. 규칙과 마찬가지로 메시지도 0개 이상의 키-값 쌍을 입력할 수 있습니다. 해당 키는 해당 요소의 이름 속성 값이기도 하며, 해당 값은 확인 오류 메시지입니다. 즉, 규칙의 메서드는{} 유효성 검사 규칙을 정의합니다. 오류 출력은 메시지에 정의됩니다{}.
위에서 주목해야 할 점은 equalTo: "#cpassword"입니다. 이 키-값 쌍의 값은 요소의 ID 값입니다(# 기호를 보면 이를 감지할 수 있어야 합니다).
위 작성 방법을 사용하면 프롬프트 정보를 맞춤 설정할 수 있습니다. 질문이 있으신가요? 양식을 확인할 때마다 프롬프트 정보를 다시 맞춤설정해야 하나요? 물론 아닙니다. Ctrl C Ctrl V도 가능합니다. 물론 이것은 농담입니다. . . 그러나 다음 방법 2는 귀하의 의심을 해결해 줄 것입니다.
방법 2: 프롬프트 메시지를 사용자 정의하고 JS 파일로 저장합니다. 템플릿으로 사용하고 필요한 페이지에서 직접 가져오세요. 인터넷에서 사본을 다운로드했습니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | (function( factory ) {
if ( typeof define === "function" && define.amd ) {
define( ["jquery", "../jquery.validate"], factory );
} else {
factory( jQuery );
}
}(function( $ ) {
$.extend($.validator.messages, {
required: "这是必填字段",
remote: "请修正此字段",
email: "请输入有效的电子邮件地址",
url: "请输入有效的网址",
date: "请输入有效的日期",
dateISO: "请输入有效的日期 (YYYY-MM-DD)",
number: "请输入有效的数字",
digits: "只能输入数字",
creditcard: "请输入有效的信用卡号码",
equalTo: "你的输入不相同",
extension: "请输入有效的后缀",
maxlength: $.validator.format("最多可以输入 {0} 个字符"),
minlength: $.validator.format("最少要输入 {0} 个字符"),
rangelength: $.validator.format("请输入长度在 {0} 到 {1} 之间的字符串"),
range: $.validator.format("请输入范围在 {0} 到 {1} 之间的数值"),
max: $.validator.format("请输入不大于 {0} 的数值"),
min: $.validator.format("请输入不小于 {0} 的数值")
});
}));
|
로그인 후 복사
추가 JS 파일이 도입된다는 점을 제외하면 페이지의 코드는 JV1.HTML과 거의 동일합니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | <!DOCTYPE html>
<html>
<head>
<script src="js/jquery.js"></script>
<script src="js/jquery.validate.js"></script>
<script src="js/messages_zh.js"></script>
<script>
$().ready(function() {
$("#registerForm").validate();
});
</script>
</head>
<body>
<form id="registerForm" method="get" action="">
<fieldset>
<p>
<label for="cusername">用户名</label>
<input id="cusername" name="username" type="text" required="true" rangelength="[2,10]">
</p>
<p>
<label for="cpassword">密码</label>
<input id="cpassword" name="password" type="password" required="true" minlength="6">
</p>
<p>
<label for="cconfirmpassword">确认密码</label>
<input id="cconfirmpassword" name="confirmpassword" type="password" required="true" equalTo="#cpassword">
</p>
<p>
<label for="cemail">邮箱</label>
<input id="cemail" name="email" required="true" email="true"> </input>
</p>
<p>
<input type="submit" value="提交">
</p>
</fieldset>
</form>
</body>
</html>
|
로그인 후 복사
方法一和方法二並不互斥，兩種方法是可以結合使用的。你可以先用方法二儲存一份比較通用的模板，然後再用方法一去依具體情況來自訂提示。
以上就是我今天下午學習的收穫了。據說在新版本中，又有了新的寫法，既不需要依賴上面提到的jquery.metadata.js庫，也不需要通過javascript自定義提示信息，而是在標籤里以data-rule-驗證規則、data-msg-提示資訊這樣的格式來重新定義。躍躍欲試......
以下是官網提供的預設校驗規則。
(1)required:true 必輸欄位
(2)remote:"check.php" 使用ajax方法呼叫check.php驗證輸入值
(3)email: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初步體驗(二)，一起學習吧。
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
