988
JQuery驗證插件validation的使用
下載：
下載validatation插件地址：jqueryvalidation.org/；這裏需要注意的是validation驗證插件有依賴於JQuery的，所以連同JQuery也要一起放置到項目中。
使用：
簡單配置：
使用的時候很簡單，首先如果我們使用環境為中文，可以自定義中文提示信息（也可以另存為文件）：如下代碼：
/**
* Created by Administrator on 2017/6/14.
*/
(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} 的數值")
});
}));入門使用：
代碼如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>validate</title>
</head>
<body>
<form action="">
<legend>用戶注冊</legend>
<label for="username">用戶名:</label>
<input type="text" name="username" >
<p>
<label for="password">密碼：</label>
<input type="password" name="password" >
</p>
<p>
<input type="submit" value="注冊">
</p>
</form>
</body>
<script src="jquery.js" type="application/javascript"></script>
<script src="validate.js" type="application/javascript"></script>
<script src="validate_cn.js" type="application/javascript"></script>
<script>
$(function () {
$('#formID').validate({
debug:true,
rules:{
username:{
required:true,
minlength:2,
maxlength:10
},
password:{
required:true,
minlength:2,
maxlength:12
}
}
})
})
</script>
</html>
顯示效果：
自定義校驗規則：
自定義校驗規則我們使用需要使用$.validator.addMethod完成。簡單實例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>validate</title>
</head>
<body>
<form action="">
<legend>用戶注冊</legend>
<label for="username">用戶名:</label>
<input type="text" name="username" >
<p>
<label for="password">密碼：</label>
<input type="password" name="password" >
</p>
<p>
<input type="submit" value="注冊">
</p>
</form>
</body>
<script src="jquery.js" type="application/javascript"></script>
<script src="validate.js" type="application/javascript"></script>
<script src="validate_cn.js" type="application/javascript"></script>
<script>
$(function () {
$('#formID').validate({
debug:true,
rules:{
username:{
required:true,
phone:true
},
password:{
required:true,
minlength:2,
maxlength:12
}
}
}),
/*
*自定義校驗規則
*phone 要驗證規則名稱
* func 校驗處理
* value 獲取輸入的值
* Element 當前的文本框
*params 校驗參數
* */
$.validator.addMethod('phone',function (value,element,params) {
/*手機的正則匹配*/
var phone =/^1[3578]\d{9}$/;
return this.optional(element)||(phone.test(value));
},'請填寫正確的手機號碼！')
})
</script>
</html>
遠程校驗：
remote用法：
1、remote使用get請求訪問服務器
訪問服務器後返回校驗結果：正常的時候返回true，檢驗不通過的時候返回錯誤提示信息
remote:url
2、remote使用post請求訪問服務器
remote:{
url:請求地址
type：請求類型post/get
data:{
需要傳遞的參數
}
}
<script>
$(function () {
$('#formID').validate({
debug:true,
rules:{
username:{
required:true,
/*遠程的校驗*/
/*remote:"check.php"*/
remote:{
url:"check.php",
type:"post",
data:{
xxx:xxx
}
}
},
password:{
required:true,
minlength:2,
maxlength:12
}
}
}),radio、checkbox、select的驗證
.radio的required表示必須選中一個
<input type="radio" value="m" name="gender" />
<input type="radio" value="f" name="gender"/>
checkbox的required表示必須選中
<input type="checkbox" name="agree" />
checkbox的minlength表示必須選中的最小個數,maxlength表示最大的選中個數,rangelength:[2,3]表示選中個數區間
<input type="checkbox" value="email" name="spam[]" />
<input type="checkbox" value="phone" name="spam[]" />
<input type="checkbox" value="mail" name="spam[]" />
select的required表示選中的value不能為空
<select name="jungle" title="Please select something!" >
<option value=""></option>
<option value="1">Buga</option>
<option value="2">Baga</option>
<option value="3">Oi</option>
</select>
select的minlength表示選中的最小個數（可多選的select）,maxlength表示最大的選中個 數,rangelength:[2,3]表示選中個數區間
<select name="fruit" title="Please select at least two fruits" multiple="multiple">
<option value="b">Banana</option>
<option value="a">Apple</option>
<option value="p">Peach</option>
<option value="t">Turtle</option>
</select>
最後更新：2017-06-15 15:02:11