jquery的表單驗(yàn)證框架--validate的使用
jquery 的表達(dá)驗(yàn)證框架--validate的使用
站在用戶的角度思考問題，與客戶深入溝通，找到慶安網(wǎng)站設(shè)計(jì)與慶安網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：成都網(wǎng)站建設(shè)、做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、空間域名、雅安服務(wù)器托管、企業(yè)郵箱。業(yè)務(wù)覆蓋慶安地區(qū)。
步驟一、引僅validate驗(yàn)證的validate.js文件<script tyep='text/javascript' src='jquery.validate.js'></script>
同時(shí)引進(jìn)jquery文件，<script type='text/javascript' src='jquery.js'></script>
步驟二、 調(diào)用加載函數(shù)開始驗(yàn)證
$(document).ready(function(){
$("formname").validate({
//驗(yàn)證的規(guī)則 每一個(gè)驗(yàn)證規(guī)則都對(duì)應(yīng)一個(gè)驗(yàn)證函數(shù)，用戶可以自定義驗(yàn)證函數(shù)
ruels:{
username:{
required:true, //必須填寫
maxlength:12, //字符的長度不得大于12
minlength:5 //字符的長度不得小于5
}
},
//對(duì)應(yīng)的錯(cuò)誤的提示信息
messages:{
username:{
required:'用戶名不能為空',
maxlength:'用戶名的長度不得超過12個(gè)字符',
minlength:'用戶名的長度不得少于5個(gè)字符'
}
}
});
})
案列參見：
<html>
<head>
<title>
jquery的表單驗(yàn)證框架--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:"真實(shí)姓名必須填",
username:{
required:'必須填寫用戶名',
minlength:'用戶名不得少于2個(gè)字符'
},
pwd:{
required:"密碼不能為空",
minlength:'密碼的長度不得小于6個(gè)字符',
maxlength: "密碼的長度不能大于12個(gè)字符"
},
respwd:{
required: "重復(fù)密碼不能為空",
minlength: "重復(fù)密碼不能少于6個(gè)字符",
equalTo: '密碼兩次輸入不一致'
},
sex:{
required: "不許選擇性別"
},
habby:{
required:"必須選擇一個(gè)愛好"
},
tel:{
required: "電話不能為空",
minlength: "電話格式不合法",
maxlength: "電話的格式不合法"
},
email:{
required: "電子郵箱不能為空",
email: "電子郵箱的格式不合法"
},
cart:{
required: "×××號(hào)不能為空",
check:"×××不合法"
}
}
});
//增加自定義的驗(yàn)證的方法
$.validator.addMethod("check",function(value,eleme,pararm){ //addMethod方法的參數(shù)，第一個(gè)參數(shù)是函數(shù)名，第二個(gè)是回調(diào)函數(shù)，第三個(gè)默認(rèn)的錯(cuò)誤提示信息，
//回調(diào)函數(shù)的參數(shù)：第一個(gè)是節(jié)點(diǎn)的值，第二個(gè)是節(jié)點(diǎn)對(duì)象，第三個(gè)是傳給函數(shù)pararm參數(shù)，也就是rules規(guī)則里的check值
if(value.length<15 || value.length>18){
return false;
}
return true;
},"請(qǐng)?zhí)顚憽痢痢撂?hào)！");
});
</script>
</head>
<body>
<form id="form">
<table align="center">
<tr>
<td>真實(shí)姓名</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>重復(fù)密碼</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>×××號(hào)</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>
//***************************************************************************/
自定義驗(yàn)證規(guī)則的詳解
如何使用自定的驗(yàn)規(guī)則:
* 自定義方法(驗(yàn)證方法的名稱是af)
/*
* <td><input type="text" id="cart" name="cart" /></td>
* 增加驗(yàn)證方法:
* $.validator.addMethod("af",function(value,element,params){},"必須是一個(gè)字母,且a-f");
* * 第一個(gè)參數(shù),就是添加的驗(yàn)證方法的名稱,這時(shí)是af
* * 第二個(gè)參數(shù),是一個(gè)函數(shù)function(value,element,params)
* * value:驗(yàn)證組件的值
* * element:驗(yàn)證組件的對(duì)象
* * params:傳遞的參數(shù) 默認(rèn)值測試
* * 第三個(gè)參數(shù),就是自定義的錯(cuò)誤提示,這里是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 表示彈出錯(cuò)誤信息
}
}
return true; //通過驗(yàn)證
},"xxxxxx");
* 在rules中指定這個(gè)某個(gè)域使用此校驗(yàn)規(guī)則
cart:{
required:true,
af:"2" //2表示默認(rèn)值 對(duì)應(yīng)的是驗(yàn)證方法的params參數(shù)
}
*在messages中指定這個(gè)域使用此校驗(yàn)規(guī)則沒有通過的提示信息
cart:{
required:"×××號(hào)碼不能為空",
af:"輸入有誤"
}
//validate常用的驗(yàn)證函數(shù)
required: true 必輸字段
remote: "check.php" 使用ajax方法調(diào)用check.php輸入驗(yàn)證值
email: true 必須輸入正確格式的電子郵箱
url: true 必須輸入正確格式的網(wǎng)址
date: true 必須輸入正確格式的日期
dateISO:true 必須輸入正確格式的日期(iso) 列(2001-5-4) 1998/5/3只驗(yàn)證格式，不驗(yàn)證有效性
number: true 必須輸入合法的數(shù)字（小數(shù)，負(fù)數(shù)）
digits:true 不許輸入整數(shù)
creditcard:必須輸入合法的信用卡號(hào)
equalTo:'#field' 輸入值必須和#field相同
accept: 輸入擁有合法后綴名的字符串（上傳文件的后綴）
maxlength:5 輸入長度最多是5的字符串（漢字算一個(gè)字符）
minlength:5輸入長度至少是5的字符串
rangelength:[5,10] 輸入的字符長度必須是在5到10之間
range[5.10] 輸入的值必須在5到10之間
max:5輸入的值不能大于5
分享題目：jquery的表單驗(yàn)證框架--validate的使用
轉(zhuǎn)載來源：http://jinyejixie.com/article16/jjidgg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站制作、網(wǎng)站建設(shè)、全網(wǎng)營銷推廣、電子商務(wù)、響應(yīng)式網(wǎng)站、網(wǎng)頁設(shè)計(jì)公司
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)
- 服務(wù)器托管與虛擬主機(jī)的區(qū)別—深圳網(wǎng)站設(shè)計(jì) 2022-06-06
- 什么是服務(wù)器托管和服務(wù)器租用？ 2021-02-15
- 你真的了解服務(wù)器托管收費(fèi)標(biāo)準(zhǔn)嗎？ 2021-03-16
- 網(wǎng)站服務(wù)器托管的方式重要嗎？ 2022-10-05
- 美國服務(wù)器托管怎么樣？有什么要留意？ 2022-10-04
- 服務(wù)器托管50idc怎么樣 2021-03-17
- 艾克賽樂服務(wù)器托管怎么樣？ 2021-03-10
- 上海服務(wù)器托管哪家性價(jià)比好 2021-03-13
- 服務(wù)器托管流程是什么樣的 2022-10-05
- 服務(wù)器托管商一定要避免的9種機(jī)房現(xiàn)狀 2022-10-07
- 服務(wù)器托管公司重裝操作系統(tǒng)收費(fèi)嗎？ 2021-03-13
- 什么是服務(wù)器托管？為何選擇服務(wù)器托管？ 2022-10-06