jQuery ??? ??
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: "請(qǐng)修正此字段",
email: "請(qǐng)輸入有效的電子郵件地址",
url: "請(qǐng)輸入有效的網(wǎng)址",
date: "請(qǐng)輸入有效的日期",
dateISO: "請(qǐng)輸入有效的日期 (YYYY-MM-DD)",
number: "請(qǐng)輸入有效的數(shù)字",
digits: "只能輸入數(shù)字",
creditcard: "請(qǐng)輸入有效的信用卡號(hào)碼",
equalTo: "你的輸入不相同",
extension: "請(qǐng)輸入有效的后綴",
maxlength: $.validator.format("最多可以輸入 {0} 個(gè)字符"),
minlength: $.validator.format("最少要輸入 {0} 個(gè)字符"),
rangelength: $.validator.format("請(qǐng)輸入長(zhǎng)度在 {0} 到 {1} 之間的字符串"),
range: $.validator.format("請(qǐng)輸入范圍在 {0} 到 {1} 之間的數(shù)值"),
max: $.validator.format("請(qǐng)輸入不大于 {0} 的數(shù)值"),
min: $.validator.format("請(qǐng)輸入不小于 {0} 的數(shù)值")});}));??? ?? ?? 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中文網(wǎng)（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 (必需, 最小兩個(gè)字母)</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() {// 在鍵盤按下并釋放及提交后驗(yàn)證提交表單
$("#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: "請(qǐng)輸入您的名字",
lastname: "請(qǐng)輸入您的姓氏",
username: {
required: "請(qǐng)輸入用戶名",
minlength: "用戶名必需由兩個(gè)字母組成" },
password: {
required: "請(qǐng)輸入密碼",
minlength: "密碼長(zhǎng)度不能小于 5 個(gè)字母" },
confirm_password: {
required: "請(qǐng)輸入密碼",
minlength: "密碼長(zhǎng)度不能小于 5 個(gè)字母",
equalTo: "兩次密碼輸入不一致" },
email: "請(qǐng)輸入一個(gè)正確的郵箱",
agree: "請(qǐng)接受我們的聲明",
topic: "請(qǐng)選擇兩個(gè)主題" }});messages? js ??? ?? ??? ?????. ???? ???? ????. ?? ???? ?????
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文網(wǎng)（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() {
// 在鍵盤按下并釋放及提交后驗(yàn)證提交表單
$("#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: "請(qǐng)輸入您的名字",
lastname: "請(qǐng)輸入您的姓氏",
username: {
required: "請(qǐng)輸入用戶名",
minlength: "用戶名必需由兩個(gè)字母組成"
},
password: {
required: "請(qǐng)輸入密碼",
minlength: "密碼長(zhǎng)度不能小于 5 個(gè)字母"
},
confirm_password: {
required: "請(qǐng)輸入密碼",
minlength: "密碼長(zhǎng)度不能小于 5 個(gè)字母",
equalTo: "兩次密碼輸入不一致"
},
email: "請(qǐng)輸入一個(gè)正確的郵箱",
agree: "請(qǐng)接受我們的聲明",
topic: "請(qǐng)選擇兩個(gè)主題"
}
});
});
</script>
<style>
.error{
color:red;
}
</style>
</head>
<body>
<form class="cmxform" id="signupForm" method="get" action="">
<fieldset>
<legend>驗(yàn)證完整的表單</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">驗(yàn)證密碼</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">請(qǐng)同意我們的聲明</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>主題 (至少選擇兩個(gè)) - 注意：如果沒有勾選“我樂意接收新信息”以下選項(xiàng)會(huì)隱藏，但我們這里作為演示讓它可見</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">至少選擇兩個(gè)</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中文網(wǎng)（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() {
// 提交時(shí)驗(yàn)證表單
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 個(gè)字母)"
},
password: {
required: " (必需字段)",
minlength: " (字母不能少于 5 個(gè)且不能大于 12 個(gè))",
maxlength: " (字母不能少于 5 個(gè)且不能大于 12 個(gè))"
}
}
});
$(".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", //后臺(tái)處理程序
type: "post", //數(shù)據(jù)發(fā)送方式
dataType: "json", //接受數(shù)據(jù)格式
data: { //要傳遞的數(shù)據(jù)
username: function() { return $("#username").val(); } }}?? ??? "true" ?? "false"? ??? ? ??? ?? ??? ??????.
9. ??? ?? ??? ?? ??
addMethod：name, method, message
??? ?? ??? ?? ??
// 中文字兩個(gè)字節(jié)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("請(qǐng)確保輸入的值在{0}-{1}個(gè)字節(jié)之間(一個(gè)中文字算2個(gè)字節(jié))"));// 郵政編碼驗(yàn)證 jQuery.validator.addMethod("isZipCode", function(value, element) {
var tel = /^[0-9]{6}$/; return this.optional(element) || (tel.test(value));}, "請(qǐng)正確填寫您的郵政編碼");??: 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;}},"必須是一個(gè)字母,且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>
