jQuery Validate
jQuery Validate 플러그인은 양식에 대한 강력한 유효성 검사 기능을 제공하여 클라이언트 측 양식 유효성 검사를 더 쉽게 만드는 동시에 다양한 애플리케이션 요구 사항을 충족하는 다양한 사용자 정의 옵션을 제공합니다. 플러그인은 URL 및 이메일 검증을 포함한 유용한 검증 방법 세트를 번들로 제공하고 사용자 정의 방법을 작성하기 위한 API를 제공합니다. 번들로 제공되는 모든 메서드는 기본적으로 오류 메시지에 영어를 사용하며 37개 다른 언어로 번역되었습니다.
이 플러그인은 jQuery 팀의 구성원이자 jQuery UI 팀의 수석 개발자이자 QUnit의 관리자인 Jörn Zaefferer가 작성하고 유지 관리합니다. 이 플러그인은 2006년 jQuery 초창기부터 사용되어 왔으며 그 이후로 계속 업데이트되었습니다. 현재 버전은 1.14.0입니다.
jQuery Validate 공식 웹사이트를 방문하여 최신 버전의 jQuery Validate 플러그인을 다운로드하세요.
JS 라이브러리 가져오기
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script> <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
기본 유효성 검사 규칙
| 일련 번호 | Rule | Description |
|---|---|---|
| 1 | 필수: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보다 작을 수 없습니다. |
기본 프롬프트
messages: {
required: "This field is required.",
remote: "Please fix this field.",
email: "Please enter a valid email address.",
url: "Please enter a valid URL.",
date: "Please enter a valid date.",
dateISO: "Please enter a valid date ( ISO ).",
number: "Please enter a valid number.",
digits: "Please enter only digits.",
creditcard: "Please enter a valid credit card number.",
equalTo: "Please enter the same value again.",
maxlength: $.validator.format( "Please enter no more than {0} characters." ),
minlength: $.validator.format( "Please enter at least {0} characters." ),
rangelength: $.validator.format( "Please enter a value between {0} and {1} characters long." ),
range: $.validator.format( "Please enter a value between {0} and {1}." ),
max: $.validator.format( "Please enter a value less than or equal to {0}." ),
min: $.validator.format( "Please enter a value greater than or equal to {0}." )}jQuery Validate는 다운로드 패키지의 dist/localization/messages_zh.js에 있는 중국어 메시지 프롬프트 패키지를 제공합니다. 내용은 다음과 같습니다.
(function( factory ) {if ( typeof define === "function" && define.amd ) {
define( ["jquery", "../jquery.validate"], factory );} else {
factory( jQuery );}}(function( $ ) {/*
* Translated default messages for the jQuery validation plugin.
* Locale: ZH (Chinese, 中文 (Zhōngwén), 汉语, 漢語)
*/$.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} 的数值")});}));현지화 정보 파일 dist/localization을 도입할 수 있습니다. /messages_zh.js 페이지:
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
사용 방법
1. 컨트롤에 확인 규칙을 작성합니다
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网（php.cn）</title>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
<script>
$.validator.setDefaults({
submitHandler: function() {
alert("提交事件!");
}
});
$().ready(function() {
$("#commentForm").validate();
});
</script>
<style>
.error{
color:red;
}
</style>
</head>
<body>
<form class="cmxform" id="commentForm" method="get" action="">
<fieldset>
<legend>输入您的名字，邮箱，URL，备注。</legend>
<p>
<label for="cname">Name (必需, 最小两个字母)</label>
<input id="cname" name="name" minlength="2" type="text" required>
</p>
<p>
<label for="cemail">E-Mail (必需)</label>
<input id="cemail" type="email" name="email" required>
</p>
<p>
<label for="curl">URL (可选)</label>
<input id="curl" type="url" name="url">
</p>
<p>
<label for="ccomment">备注 (必需)</label>
<textarea id="ccomment" name="comment" required></textarea>
</p>
<p>
<input class="submit" type="submit" value="Submit">
</p>
</fieldset>
</form>
</body>
</html>사용해 보세요
2.
$().ready(function() {// 在键盘按下并释放及提交后验证提交表单
$("#signupForm").validate({
rules: {
firstname: "required",
lastname: "required",
username: {
required: true,
minlength: 2 },
password: {
required: true,
minlength: 5 },
confirm_password: {
required: true,
minlength: 5,
equalTo: "#password" },
email: {
required: true,
email: true },
topic: {
required: "#newsletter:checked",
minlength: 2 },
agree: "required" },
messages: {
firstname: "请输入您的名字",
lastname: "请输入您的姓氏",
username: {
required: "请输入用户名",
minlength: "用户名必需由两个字母组成" },
password: {
required: "请输入密码",
minlength: "密码长度不能小于 5 个字母" },
confirm_password: {
required: "请输入密码",
minlength: "密码长度不能小于 5 个字母",
equalTo: "两次密码输入不一致" },
email: "请输入一个正确的邮箱",
agree: "请接受我们的声明",
topic: "请选择两个主题" }});messages의 js 코드에 확인 규칙을 작성합니다. 컨트롤에 메시지가 없습니다. 기본 메시지를 호출합니다
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网（php.cn）</title>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
<script>
$.validator.setDefaults({
submitHandler: function() {
alert("提交事件!");
}
});
$().ready(function() {
// 在键盘按下并释放及提交后验证提交表单
$("#signupForm").validate({
rules: {
firstname: "required",
lastname: "required",
username: {
required: true,
minlength: 2
},
password: {
required: true,
minlength: 5
},
confirm_password: {
required: true,
minlength: 5,
equalTo: "#password"
},
email: {
required: true,
email: true
},
"topic[]": {
required: "#newsletter:checked",
minlength: 2
},
agree: "required"
},
messages: {
firstname: "请输入您的名字",
lastname: "请输入您的姓氏",
username: {
required: "请输入用户名",
minlength: "用户名必需由两个字母组成"
},
password: {
required: "请输入密码",
minlength: "密码长度不能小于 5 个字母"
},
confirm_password: {
required: "请输入密码",
minlength: "密码长度不能小于 5 个字母",
equalTo: "两次密码输入不一致"
},
email: "请输入一个正确的邮箱",
agree: "请接受我们的声明",
topic: "请选择两个主题"
}
});
});
</script>
<style>
.error{
color:red;
}
</style>
</head>
<body>
<form class="cmxform" id="signupForm" method="get" action="">
<fieldset>
<legend>验证完整的表单</legend>
<p>
<label for="firstname">名字</label>
<input id="firstname" name="firstname" type="text">
</p>
<p>
<label for="lastname">姓氏</label>
<input id="lastname" name="lastname" type="text">
</p>
<p>
<label for="username">用户名</label>
<input id="username" name="username" type="text">
</p>
<p>
<label for="password">密码</label>
<input id="password" name="password" type="password">
</p>
<p>
<label for="confirm_password">验证密码</label>
<input id="confirm_password" name="confirm_password" type="password">
</p>
<p>
<label for="email">Email</label>
<input id="email" name="email" type="email">
</p>
<p>
<label for="agree">请同意我们的声明</label>
<input type="checkbox" class="checkbox" id="agree" name="agree">
</p>
<p>
<label for="newsletter">我乐意接收新信息</label>
<input type="checkbox" class="checkbox" id="newsletter" name="newsletter">
</p>
<fieldset id="newsletter_topics">
<legend>主题 (至少选择两个) - 注意：如果没有勾选“我乐意接收新信息”以下选项会隐藏，但我们这里作为演示让它可见</legend>
<label for="topic_marketflash">
<input type="checkbox" id="topic_marketflash" value="marketflash" name="topic[]">Marketflash
</label>
<label for="topic_fuzz">
<input type="checkbox" id="topic_fuzz" value="fuzz" name="topic[]">Latest fuzz
</label>
<label for="topic_digester">
<input type="checkbox" id="topic_digester" value="digester" name="topic[]">Mailing list digester
</label>
<label for="topic" class="error" style="display:none">至少选择两个</label>
</fieldset>
<p>
<input class="submit" type="submit" value="提交">
</p>
</fieldset>
</form>
</body>
</html>사용해 보세요
required: true 값이 필요합니다.
필수: "#aa:checked" 표현식의 값이 true인 경우 확인이 필요합니다.
required: function(){}은 true를 반환하여 확인이 필요함을 나타냅니다.
후자의 두 가지는 양식에서 동시에 채우거나 생략해야 하는 요소에 일반적으로 사용됩니다.
주의해야 할 일반적인 방법 및 문제
1. 기본 SUBMIT를 대체하려면 다른 방법을 사용하세요
$().ready(function() {
$("#signupForm").validate({
submitHandler:function(form){
alert("提交事件!");
form.submit(); }
});});ajax 방법을 사용하세요
$(".selector").validate({
submitHandler: function(form)
{
$(form).ajaxSubmit();
}
})validate의 기본값을 다음과 같이 설정할 수 있습니다.
$.validator.setDefaults({
submitHandler: function(form) { alert("提交事件!");form.submit(); }});If 양식을 제출하려면 $(form).submit()을 사용하는 대신 form.submit()을 사용해야 합니다.
2. 디버그, 확인만 하고 양식을 제출하지 않음
이 매개변수가 true이면 양식이 제출되지 않고 확인만 이루어지므로 디버깅에 매우 편리합니다.
$().ready(function() {
$("#signupForm").validate({
debug:true });});디버그로 설정하려는 페이지에 여러 양식이 있는 경우 다음을 사용하세요.
$.validator.setDefaults({
debug: true})3. 무시: 확인 없이 특정 요소를 무시합니다.
ignore: ".ignore"
4 오류 메시지가 표시되는 위치를 변경합니다.
errorPlacement：Callback
잘못된 배치를 나타냅니다. 위치, 기본값은 error.appendTo(element.parent())입니다. 즉, 오류 메시지는 확인된 요소 뒤에 배치됩니다.
errorPlacement: function(error, element) {
error.appendTo(element.parent()); }예
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网（php.cn）</title>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
<script>
$.validator.setDefaults({
submitHandler: function() {
alert("提交事件!");
}
});
$().ready(function() {
// 提交时验证表单
var validator = $("#form1").validate({
errorPlacement: function(error, element) {
// Append error within linked label
$( element )
.closest( "form" )
.find( "label[for='" + element.attr( "id" ) + "']" )
.append( error );
},
errorElement: "span",
messages: {
user: {
required: " (必需字段)",
minlength: " (不能少于 3 个字母)"
},
password: {
required: " (必需字段)",
minlength: " (字母不能少于 5 个且不能大于 12 个)",
maxlength: " (字母不能少于 5 个且不能大于 12 个)"
}
}
});
$(".cancel").click(function() {
validator.resetForm();
});
});
</script>
<style>
.error{
color:red;
}
</style>
</head>
<body>
<form method="get" class="cmxform" id="form1" action="">
<fieldset>
<legend>登录框</legend>
<p>
<label for="user">用户名</label>
<input id="user" name="user" required minlength="3">
</p>
<p>
<label for="password">密码</label>
<input id="password" type="password" maxlength="12" name="password" required minlength="5">
</p>
<p>
<input class="submit" type="submit" value="Login">
</p>
</fieldset>
</form>
</body>
</html>사용해 보세요
코드의 기능은 다음과 같습니다. 일반적인 상황에서는 오류 메시지가 <td class="status"></td>에 표시됩니다. 라디오인 경우 <td></td>에 표시되며, 체크박스인 경우 콘텐츠 뒤에 표시됩니다.
| Parameter | Type | Description | Default value |
|---|---|---|---|
| errorClass | String | 오류 프롬프트의 CSS 클래스 이름을 지정하고, 오류 프롬프트의 스타일을 사용자 정의할 수 있습니다. | "error" |
| errorElement | String | 오류를 표시하는 데 사용할 레이블은 무엇입니까? 기본값은 레이블이며 em으로 변경할 수 있습니다. | "label" |
| errorContainer | Selector | 오류 메시지가 있을 때 표시할 컨테이너 속성을 자동으로 변경하고, 오류가 없을 때 숨길 수 있습니다. 사용. errorContainer: "#messageBox1, #messageBox2" | |
| errorLabelContainer | Selector | 오류 메시지를 하나의 컨테이너에 담습니다. | |
| wrapper | String | 위의 errorELement를 래핑하는 데 어떤 라벨을 사용해야 합니까? |
일반적으로 이 세 가지 속성을 동시에 사용하여 컨테이너에 모든 오류 프롬프트를 표시하고 정보가 없을 때 자동으로 숨기는 기능을 구현합니다.
errorContainer: "div.error",errorLabelContainer: $("#signupForm div.error"),wrapper: "li"5. 오류 메시지 표시 스타일 변경
오류 프롬프트 스타일을 설정하고 아이콘 표시를 추가할 수 있습니다. 이 시스템에는 검증 스타일을 유지하는 데 특별히 사용되는 Validation.css가 설정되어 있습니다. 파일.
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;}label.checked {
background:url("./demo/images/checked.gif") no-repeat 0px 0px;}6. 각 필드는
success：String,Callback
함수를 실행하여 확인됩니다. 확인하려는 요소가 확인을 통과한 후의 작업은 문자열이 뒤따르거나 CSS 클래스로 처리됩니다. 기능.
success: function(label) { // set as text for IE
label.html(" ").addClass("checked"); //label.addClass("valid").text("Ok!")}CSS <style>label.valid {}</style>에 정의된 스타일을 사용하여 유효성 검사 요소에 "valid"를 추가하세요.
success: "valid"
7. 검증 트리거 방식 수정
다음은 불리언 타입이지만, false로 변경하려는 경우가 아니라면 임의로 추가하지 않는 것이 좋습니다.
| 트리거 방법 | 유형 | 설명 | 기본값 |
|---|---|---|---|
| onsubmit | Boolean | 제출 시 유효성을 검사합니다. 다른 방법을 사용하여 확인하려면 false로 설정하세요. | true |
| onfocusout | Boolean | 포커스가 손실되면 유효성을 검사합니다(체크박스/라디오 버튼 제외). | true |
| onkeyup | Boolean | keyup에서 확인되었습니다. | true |
| onclick | Boolean | 체크박스와 라디오 버튼 클릭 시 유효성을 검사합니다. | true |
| focusInvalid | Boolean | 양식이 제출된 후 유효성 검사에 실패한 양식(첫 번째 양식 또는 제출 전에 포커스를 받은 실패한 유효성 검사 양식)이 포커스를 받게 됩니다. | true |
| focusCleanup | Boolean | true이면 유효성 검사에 실패한 요소에 포커스가 있을 때 오류 메시지를 제거합니다. focusInvalid와 함께 사용하지 마세요. | 거짓 |
// 重置表单$().ready(function() { var validator = $("#signupForm").validate({
submitHandler:function(form){
alert("submitted");
form.submit(); }
});
$("#reset").click(function() {
validator.resetForm(); });});8. 비동기 검증
remote：URL
검증에는 기본적으로 현재 검증된 값이 원격 주소로 제출됩니다. 다른 값을 제출해야 하는 경우 데이터 옵션을 사용할 수 있습니다.
remote: "check-email.php"
remote: {
url: "check-email.php", //后台处理程序
type: "post", //数据发送方式
dataType: "json", //接受数据格式
data: { //要传递的数据
username: function() { return $("#username").val(); } }}원격 주소는 "true" 또는 "false"만 출력할 수 있으며 다른 출력은 불가능합니다.
9. 사용자 정의 유효성 검사 추가
addMethod：name, method, message
사용자 정의 유효성 검사 방법
// 中文字两个字节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] ); }, $.validator.format("请确保输入的值在{0}-{1}个字节之间(一个中文字算2个字节)"));// 邮政编码验证 jQuery.validator.addMethod("isZipCode", function(value, element) {
var tel = /^[0-9]{6}$/; return this.optional(element) || (tel.test(value));}, "请正确填写您的邮政编码");참고: added-methods.js 파일에 추가하거나 jquery.validate.js 파일에 추가하세요. 추가적인-methods.js 파일에 작성하는 것을 권장합니다.
Note: 추가: isZipCode: message_cn.js 파일에 "한자, 영문자, 숫자 및 밑줄만 포함할 수 있습니다." 호출하기 전에 extra-methods.js 파일에 대한 참조를 추가하세요.
10.라디오 확인, 체크박스, 선택
라디오에서 필수는 반드시 하나를 선택해야 한다는 의미입니다.
<input type="radio" id="gender_male" value="m" name="gender" required /><input type="radio" id="gender_female" value="f" name="gender"/>
확인란의 필수 항목은 선택해야 한다는 의미입니다.
<input type="checkbox" class="checkbox" id="agree" name="agree" required />
확인란의 minlength는 선택해야 하는 최소 개수를 나타내고, maxlength는 최대 선택 개수를 나타내며, rangelength:[2,3]은 선택 개수의 범위를 나타냅니다.
<input type="checkbox" class="checkbox" id="spam_email" value="email" name="spam[]" required minlength="2" /><input type="checkbox" class="checkbox" id="spam_phone" value="phone" name="spam[]" /><input type="checkbox" class="checkbox" id="spam_mail" value="mail" name="spam[]" />
select의 필수는 선택한 값을 비워 둘 수 없음을 의미합니다.
<select id="jungle" name="jungle" title="Please select something!" required> <option value=""></option> <option value="1">Buga</option> <option value="2">Baga</option> <option value="3">Oi</option></select>
select의 minlength는 선택한 항목의 최소 개수(다중 선택 가능)를 나타내고, maxlength는 선택한 최대 개수를 나타내며, rangelength:[2,3]은 선택한 개수 범위를 나타냅니다.
<select id="fruit" name="fruit" title="Please select at least two fruits" class="{required:true, minlength:2}" multiple="multiple"> <option value="b">Banana</option> <option value="a">Apple</option> <option value="p">Peach</option> <option value="t">Turtle</option></select>jQuery.validate Chinese API
| Name | Return type | Description |
|---|---|---|
| validate(options) | Validator | 선택한 FORM을 검증합니다. |
| valid() | Boolean | 인증이 통과되었는지 확인하세요. |
| rules() | Options | 요소의 유효성 검사 규칙을 반환합니다. |
| rules("add",rules) | Options | 확인 규칙을 추가합니다. |
| rules("remove",rules) | Options | 확인 규칙을 제거합니다. |
| removeAttrs(속성) | Options | 특수 속성을 제거하고 반환합니다. |
| Custom Selector | ||
| :blank | Validator | 값이 없는 필터입니다. |
| :filled | Array <Element> | 값 필터. |
| : 선택 해제됨 | Array <Element> | 선택되지 않은 요소에 대한 필터입니다. |
| Utilities | ||
| jQuery.format(template,argument,argumentN...) | String | 템플릿의 {n}을 매개변수로 바꿉니다. |
Validator
validate 메소드는 Validator 객체를 반환합니다. Validator 개체에는 유효성 검사 프로그램을 실행하거나 양식의 내용을 변경하는 데 사용할 수 있는 많은 메서드가 있습니다. 다음은 일반적으로 사용되는 몇 가지 메서드입니다.
| Name | Return type | Description |
|---|---|---|
| form() | Boolean | 확인 양식은 성공 또는 실패를 반환합니다. |
| element(element) | Boolean | 단일 요소가 성공하는지 실패하는지 확인합니다. |
| resetForm() | undefine | 이전에 검증된 FORM을 검증 전 원래 상태로 복원합니다. |
| showErrors(errors) | undefine | 특정 오류 메시지를 표시합니다. |
| Validator 기능 | ||
| setDefaults(defaults) | undefine | 기본 설정을 변경하세요. |
| addMethod(name,method,message) | undefine | 새 인증 방법을 추가하세요. 고유한 이름, JAVASCRIPT 메소드 및 기본 메시지를 포함해야 합니다. |
| addClassRules(name,rules) | undefine | 결합된 확인 유형을 추가합니다. 이는 클래스에서 여러 확인 방법을 사용할 때 더 유용합니다. |
| addClassRules(rules) | undefine | 결합된 확인 유형을 추가합니다. 이는 클래스에서 여러 확인 방법을 사용할 때 더 유용합니다. 여러 개의 검증 방법을 동시에 추가하는 것입니다. |
내장된 유효성 검사 방법
| Name | 반환 유형 | Description |
|---|---|---|
| required() | Boolean | 필수 유효성 검사 요소입니다. |
| required(dependent-expression) | Boolean | 필수 요소는 표현식 결과에 따라 달라집니다. |
| required(dependent-callback) | Boolean | 필수 요소는 콜백 함수의 결과에 따라 달라집니다. |
| remote(url) | Boolean | 원격 확인을 요청합니다. url은 일반적으로 원격 호출 방법입니다. |
| minlength(length) | Boolean | 최소 길이를 설정합니다. |
| maxlength(length) | Boolean | 최대 길이를 설정합니다. |
| rangelength(range) | Boolean | 길이 범위 [min,max]를 설정합니다. |
| min(value) | Boolean | 최소값을 설정합니다. |
| max(value) | Boolean | 최대값을 설정합니다. |
| email() | Boolean | 이메일 형식을 확인하세요. |
| range(range) | Boolean | 값의 범위를 설정합니다. |
| url() | Boolean | URL 형식을 확인하세요. |
| date() | Boolean | 날짜 형식을 확인합니다(2008년 30월 30일 형식과 유사하며 날짜 정확성은 확인하지 않고 형식만 확인합니다). |
| dateISO() | Boolean | ISO 유형 날짜 형식을 확인하세요. |
| dateDE() | Boolean | 독일 날짜 형식(29.04.1994 또는 1.1.2006)을 확인하세요. |
| number() | Boolean | 십진수(십진수 포함)를 확인합니다. |
| digits() | Boolean | 정수 유효성을 검사합니다. |
| creditcard() | Boolean | 신용카드 번호를 확인하세요. |
| accept(extension) | Boolean | 접미사 이름이 같은 문자열을 확인하세요. |
| equalTo(other) | Boolean | 두 입력 상자의 내용이 동일한지 확인합니다. |
| phoneUS() | Boolean | 미국 전화번호를 확인하세요. |
validate() 옵션
| 설명 | 코드 |
|---|---|
| debug: 디버그 모드로 들어갑니다(양식이 제출되지 않음). | $(".selector").validate({
debug:true}) |
| 디버깅을 기본값으로 설정하세요. | $.validator.setDefaults({
debug:true}) |
| submitHandler: 검증 통과 후 실행되는 함수에는 양식 제출 기능이 포함되어야 합니다. 그렇지 않으면 양식이 제출되지 않습니다. | $(".selector").validate({
submitHandler:function(form) {
$(form).ajaxSubmit();}}) |
| 무시: 일부 요소의 유효성을 검사하지 않습니다. | $("#myform").validate({
ignore:".ignore"}) |
| 규칙: 키:값 형식의 맞춤 규칙, 키는 확인할 요소이고 값은 문자열 또는 개체일 수 있습니다. | $(".selector").validate({
rules:{
name:"required",
email:{
required:true,
email:true}}}) |
| messages: 키:값 형식의 사용자 정의 프롬프트 메시지입니다. 키는 확인할 요소이고 값은 문자열 또는 함수일 수 있습니다. | $(".selector").validate({
rules:{
name:"required",
email:{
required:true,
email:true}},
messages:{
name:"Name不能为空",
email:{
required:"E-mail不能为空",
email:"E-mail地址不正确"}}}) |
| groups: 요소 그룹을 확인하고, 오류 프롬프트를 사용하고, errorPlacement를 사용하여 오류 메시지가 배치되는 위치를 제어합니다. | $("#myform").validate({
groups:{
username:"fname
lname"},
errorPlacement:function(error,element) {if (element.attr("name") == "fname" || element.attr("name") == "lname")
error.insertAfter("#lastname");else
error.insertAfter(element);},
debug:true}) |
| OnSubmit: 부울 유형, 기본값은 true이며 제출 시 확인할지 여부를 지정합니다. | $(".selector").validate({
onsubmit:false}) |
| onfocusout: 부울 유형, 기본값은 true이며 포커스를 받을 때 확인할지 여부를 지정합니다. | $(".selector").validate({
onfocusout:false}) |
| onkeyup: 부울 유형, 기본값은 true이며 키보드를 쳤을 때 확인할지 여부를 지정합니다. | $(".selector").validate({
onkeyup:false}) |
| onclick: 부울 유형, 기본값은 true, 마우스 클릭 시 확인 여부를 지정합니다(일반 확인 체크박스, 라디오박스). | $(".selector").validate({
onclick:false}) |
| focusInvalid: 부울 유형, 기본값은 true입니다. 양식이 제출된 후 유효성 검사에 실패한 양식(첫 번째 실패한 유효성 검사 양식 또는 제출 전에 포커스를 받은 양식)이 포커스를 받습니다. | $(".selector").validate({
focusInvalid:false}) |
| focusCleanup: 부울을 입력하고 기본값은 false입니다. 유효성이 검사되지 않은 요소에 포커스가 있을 때 오류 메시지를 제거합니다(focusInvalid와 함께 사용하지 마세요). | $(".selector").validate({
focusCleanup:true}) |
| errorClass: 유형 문자열, 기본값은 "error"입니다. 오류 프롬프트의 스타일을 사용자 정의하려면 오류 프롬프트의 CSS 클래스 이름을 지정하십시오. | $(".selector").validate({
errorClass:"invalid"}) |
| errorElement: 유형 문자열, 기본값은 "레이블"입니다. 오류를 표시하는 데 사용할 레이블을 지정합니다. | $(".selector").validate
errorElement:"em"}) |
| wrapper: 문자열을 입력하고 사용할 레이블을 지정하고 위의 errorELement를 래핑합니다. | $(".selector").validate({
wrapper:"li"}) |
| errorLabelContainer: 오류 정보를 컨테이너에 넣는 유형 선택기입니다. | $("#myform").validate({
errorLabelContainer:"#messageBox",
wrapper:"li",
submitHandler:function() {
alert("Submitted!")
}}) |
| showErrors: 유효성 검사에 실패한 총 요소 수를 표시하는 함수가 뒤에 옵니다. | $(".selector").validate({
showErrors:function(errorMap,errorList) {
$("#summary").html("Your form contains " + this.numberOfInvalids() + " errors,see details below.");this.defaultShowErrors();}}) |
| errorPlacement: 기능을 사용하면 오류가 있는 위치를 맞춤 설정할 수 있습니다. | $("#myform").validate({
errorPlacement:function(error,element) {
error.appendTo(element.parent("td").next("td")); },
debug:true}) |
| success: 확인할 요소가 확인을 통과한 후의 작업 뒤에 문자열이 오면 CSS 클래스로 처리되거나 함수가 뒤따를 수 있습니다. | $("#myform").validate({
success:"valid",
submitHandler:function() {
alert("Submitted!")
}}) |
| highlight: 검증을 통과하지 못한 요소에 효과, 플래시 등을 추가할 수 있습니다. |
addMethod(name, method, message) method
파라미터 이름은 추가된 메소드의 이름입니다.
매개변수 메소드는 3개의 매개변수(값, 요소, 매개변수)를 전달받는 함수입니다.
value는 요소의 값, element는 요소 자체, param은 매개변수입니다.
addMethod를 사용하면 내장된 유효성 검사 방법 외에 유효성 검사 방법을 추가할 수 있습니다. 예를 들어 한 글자만 입력할 수 있는 필드가 있고 범위는 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"인 양식 필드가 있는 경우 규칙:
username:{
af:["a","f"]} addMethod의 첫 번째 매개변수는 추가된 확인 방법의 이름입니다. 이 경우에는 af입니다.
addMethod의 세 번째 매개변수는 사용자 정의 오류 프롬프트입니다. 여기서 프롬프트는 "문자이어야 하며 a-f"입니다.
addMethod의 두 번째 매개변수는 함수이며 이 검증 방법을 사용할 때 쓰기 방법을 결정합니다.
매개변수가 하나만 있는 경우 af: "a"와 같이 직접 입력하세요. 매개변수가 여러 개인 경우에는 [] 안에 입력하고 쉼표로 구분하세요.
메타 스트링 방식
$("#myform").validate({
meta:"validate",
submitHandler:function() { alert("Submitted!") }})<script type="text/javascript" src="js/jquery.metadata.js"></script><script type="text/javascript" src="js/jquery.validate.js"></script><form id="myform"> <input type="text" name="email" class="{validate:{ required:true,email:true }}" /> <input type="submit" value="Submit" /></form>