jquery 的表達驗證框架--validate的使用
步驟一、引僅validate驗證的validate.js文件<script tyep='text/javascript' src='jquery.validate.js'></script>
同時引進jquery文件，<script type='text/javascript' src='jquery.js'></script>
步驟二、 調用加載函數開始驗證
$(document).ready(function(){
$("formname").validate({
//驗證的規則 每一個驗證規則都對應一個驗證函數，用戶可以自定義驗證函數
ruels:{
username:{
required:true, //必須填寫
maxlength:12, //字符的長度不得大于12
minlength:5 //字符的長度不得小于5
}
},
//對應的錯誤的提示信息
messages:{
username:{
required:'用戶名不能為空',
maxlength:'用戶名的長度不得超過12個字符',
minlength:'用戶名的長度不得少于5個字符'
}
}
});
})
案列參見：
<html>
<head>
<title>
jquery的表單驗證框架--validate
</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<link rel="stylesheet" type="text/css" media="screen" href="./css/screen.css" />
<script type="text/javascript" src="jquery-1.8.0.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>
<script type="text/javascript">
$.validator.setDefaults({
submitHandler: function() { alert("submitted!"); }
});
$(document).ready(function(){
$("form").validate({
rules: {
relname:"required",
username:{
required: true,
minlength: "2"
},
pwd:{
required: true,
minlength:6,
maxlength: 12
},
respwd:{
required: true,
minlength:6,
equalTo: "#pwd"
},
sex:{
required: true
},
habby:{
required: true
},
tel:{
required: true,
minlength:6,
maxlength:11
},
email:{
required: true,
email: true
},
cart:{
required: true,
check: true
}
},
messages:{
relname:"真實姓名必須填",
username:{
required:'必須填寫用戶名',
minlength:'用戶名不得少于2個字符'
},
pwd:{
required:"密碼不能為空",
minlength:'密碼的長度不得小于6個字符',
maxlength: "密碼的長度不能大于12個字符"
},
respwd:{
required: "重復密碼不能為空",
minlength: "重復密碼不能少于6個字符",
equalTo: '密碼兩次輸入不一致'
},
sex:{
required: "不許選擇性別"
},
habby:{
required:"必須選擇一個愛好"
},
tel:{
required: "電話不能為空",
minlength: "電話格式不合法",
maxlength: "電話的格式不合法"
},
email:{
required: "電子郵箱不能為空",
email: "電子郵箱的格式不合法"
},
cart:{
required: "×××號不能為空",
check:"×××不合法"
}
}
});
//增加自定義的驗證的方法
$.validator.addMethod("check",function(value,eleme,pararm){ //addMethod方法的參數，第一個參數是函數名，第二個是回調函數，第三個默認的錯誤提示信息，
//回調函數的參數：第一個是節點的值，第二個是節點對象，第三個是傳給函數pararm參數，也就是rules規則里的check值
if(value.length<15 || value.length>18){
return false;
}
return true;
},"請填寫×××號！");
});
</script>
</head>
<body>
<form id="form">
<table align="center">
<tr>
<td>真實姓名</td><td><input type="text" name="relname" id="relname" /></td>
</tr>
<tr>
<td>賬戶名</td><td><input type="text" name="username" id="username" /></td>
</tr>
<tr>
<td>密碼</td><td><input type="password" name="pwd" id="pwd" /></td>
</tr>
<tr>
<td>重復密碼</td><td><input type="password" name="respwd" id="respwd" /></td>
</tr>
<tr>
<td>性別</td><td>
<input type="radio" name="sex" id="sex"/>男
<input type="radio" name="sex" id="sex"/>女
</td>
</tr>
<tr>
<td>愛好</td><td>
<input type="checkbox" name="habby" id="habby" value="籃球"/>籃球
<input type="checkbox" name="habby" id="habby" value="足球"/>足球
<input type="checkbox" name="habby" id="habby" value="乒乓球"/>乒乓球
<input type="checkbox" name="habby" id="habby" value="象棋"/>象棋
</td>
</tr>
<tr>
<td>電話</td><td><input type="text" name="tel" id="tel" /></td>
</tr>
<tr>
<td>郵箱</td><td><input type="text" name="email" id="email" /></td>
</tr>
<tr>
<td>×××號</td><td><input type="text" id="cart" name="cart" /></td>
</tr>
<tr><td colspan="2"><input type="submit" value="提交"/></td></tr>
</table>
</form>
</body>
</html>
//***************************************************************************/
自定義驗證規則的詳解
如何使用自定的驗規則:
* 自定義方法(驗證方法的名稱是af)
/*
* <td><input type="text" id="cart" name="cart" /></td>
* 增加驗證方法:
* $.validator.addMethod("af",function(value,element,params){},"必須是一個字母,且a-f");
* * 第一個參數,就是添加的驗證方法的名稱,這時是af
* * 第二個參數,是一個函數function(value,element,params)
* * value:驗證組件的值
* * element:驗證組件的對象
* * params:傳遞的參數 默認值測試
* * 第三個參數,就是自定義的錯誤提示,這里是xxxxxxx
*/
$.validator.addMethod("af",function(value,element,params){
// alert("value "+value);
// alert("element "+element);
// alert("params "+params);
if(value!=null){
var len=value.length;
if(len!=15||len!=18){
return false; //false 表示彈出錯誤信息
}
}
return true; //通過驗證
},"xxxxxx");
* 在rules中指定這個某個域使用此校驗規則
cart:{
required:true,
af:"2" //2表示默認值 對應的是驗證方法的params參數
}
*在messages中指定這個域使用此校驗規則沒有通過的提示信息
cart:{
required:"×××號碼不能為空",
af:"輸入有誤"
}
//validate常用的驗證函數
required: true 必輸字段
remote: "check.php" 使用ajax方法調用check.php輸入驗證值
email: true 必須輸入正確格式的電子郵箱
url: true 必須輸入正確格式的網址
date: true 必須輸入正確格式的日期
dateISO:true 必須輸入正確格式的日期(iso) 列(2001-5-4) 1998/5/3只驗證格式，不驗證有效性
number: true 必須輸入合法的數字（小數，負數）
digits:true 不許輸入整數
creditcard:必須輸入合法的信用卡號
equalTo:'#field' 輸入值必須和#field相同
accept: 輸入擁有合法后綴名的字符串（上傳文件的后綴）
maxlength:5 輸入長度最多是5的字符串（漢字算一個字符）
minlength:5輸入長度至少是5的字符串
rangelength:[5,10] 輸入的字符長度必須是在5到10之間
range[5.10] 輸入的值必須在5到10之間
max:5輸入的值不能大于5
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
