教程地址
地址在這:http://www.runoob.com/jquery/jquery-plugin-validate.html,比這篇說的要詳細,此篇只是自己初學的筆記,有更多的方法看教程比較好.
插件地址
自己打包了使用此功能必須的插件:點我下載
默認校驗規則
| 規則 | 描述 |
|---|---|
| required:true | 必須輸入的字段 |
| remote:'check.php' | 使用ajax方式調用check.php驗證輸入值 |
| email:true | 必須輸入正確格式的郵箱地址 |
| url:true | 必須輸入正確格式的網址 |
| date:true | 必須輸入正確格式的日期。日期校驗 ie6 出錯，慎用。 |
| dateISO:true | 必須輸入正確格式的日期(ISO),例如:2009-02-16,1998/09/12,只驗證格式,不驗證有效性 |
| number:true | 必須輸入合法的數字(負數,小數) |
| digits:true | 必須輸入正數 |
| creditcard: | 必須輸入合法的信用卡卡號 |
| equalTo:"#field" | 輸入值必須和 #field 相同 |
| accept: | 輸入擁有合法后綴名的字符串(上傳文件的后綴) |
| maxlength:5 | 輸入長度最多為5的字符串(漢字算1個字符串) |
| minlength:5 | 輸入長度最少為5的字符串 |
| rangelength:[5:10] | 輸入長度必須為5-10個字符串 |
| range[5:10] | 輸入值必須為5-10之間 |
| max:5 | 輸入值最大不能大於5 |
| min:5 | 輸入值最小不能小於5 |
默認提示
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>
使用方式
注意事項
- 標簽中必須有
name的屬性,是靠name取值的 - 加載時,必須jQuery在最上面,會報錯
- 字體的顏色設置css時,需要
.error命名 - 需要jQuery1.11版本的
- 重置表單狀態,需要使用
button按鈕 - 清空表單使用
<input type='reset' />實現
例子
直接就寫到一個例子當中了,注意看注釋吧:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test2</title>
<style>
/* 錯誤信息CSS樣式,名稱為.error*/
.error{
color: red;
}
</style>
</head>
<body>
<form action="/test2/" class="testform" id="testform">
<p>
<label for="firstname">姓氏</label>
<input type="text" name="firstname" id="firstname">
</p>
<p>
<label for="lastname">名字</label>
<input type="text" name="lastname" id="lastname">
</p>
<p>
<label for="password">密碼</label>
<input type="password" name="password" id="password">
</p>
<p>
<label for="confirm_password">確認密碼</label>
<input type="password" name="confirm_password" >
</p>
{# <p><input type="password" name="xxx"></p>#}
<p><label for="email">郵箱:</label><input type="text" name="email"></p>
<p><label for="comment">備注:</label><textarea name="comment" id="comment" cols="30" rows="8"></textarea></p>
<p><input type="submit" value="提交"></p>
{# /* 清空表單可以直接使用reset的button */#}
<p><input type="reset"></p>
{# 重置表單狀態#}
<p><input type="button" value="清空表單" id="reset"></p>
</form>
{# ## jqure文件要首先導入#}
<script src="/static/jquery.js"></script>
<script src='/static/jquery.validate.js'></script>
<script src='/static/messages_zh.js'></script>
<script>
$().ready(function () {
var validator = $("#testform").validate({
rules:{
firstname:{required:true,minlength:5},
lastname:{required:true,minlength:5},
password:{required:true,minlength:6},
confirm_password:{required:true,minlength:6,equalTo:"#password"},
email:{required:true,email:true}
},
messages:{
firstname:{required:'必須輸入姓氏',minlength:'不能小於5個字符'},
lastname:{required:'必須輸入名字',minlength:'不能小於5個字符'},
password:{required:'請輸入密碼',minlength:'密碼至少6位'},
confirm_password:{required:'請確認密碼',minlength:'密碼至少6位',equalTo:'兩次輸入的密碼不匹配'},
email:'請輸入一個正確的郵箱地址'
},
errorPlacement: function(error, element) {
// 更改錯誤提示位置在輸入框下面
// var p = $("<p />").append(error);
// p.appendTo(element.parent());
// 位置默認在輸入框右側
error.appendTo(element.parent());
},
submitHandler:function(form) {
var firstname = $('#firstname').val();
$.ajax({
url:'/test2/',
type:'POST',
dataType:'json',
data:{'firstname':firstname},
success:function (data) {
if(data.status){
alert(data.message)
}else{
alert('failure')
}
}
})
}
});
// 需要將input的type設置為button,重置表單為提交前的狀態
$('#reset').click(function () {
validator.resetForm();
});
});
</script>
</body>
</html>