小編上網(wǎng)查閱了許多關(guān)于jquery.validate的文章，大部門只是介紹它的api和用法，沒有一個(gè)詳細(xì)的的入門案例介紹，研究了半天還是無從下手。為此，小編自己做了一個(gè)jquery validate.js表單驗(yàn)證入門實(shí)例，寫的不是特別好，但應(yīng)該適用于初學(xué)者，分享給大家。

以下是validate.js表單驗(yàn)證入門實(shí)例參考源碼，文章下面有源碼下載地址：

<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>j2query.validate快速入門范例-代瀟瑞博客</title>
 <meta name="keywords" content="" />
 <meta name="description" content="jquery.validate.js是一個(gè)強(qiáng)大的表單驗(yàn)證插件，這里將來個(gè)快速入門范例，展示它的快速易用性。" />
 <script src="jquery-1.8.0.min.js" type="text/javascript"></script>
 <script src="jquery.validate.min.js" type="text/javascript"></script>
 <style type="text/css">
 label.error{color:red;font-size:13px;}
 </style>
</head>
<body>
 <p>信息錄入</p>
 <form action="" name="infos" id="infos">
 <p>用戶名：<input type="text" name="username" /></p>
 <p>工作號(hào)：<input type="text" name="nums" /></p>
 <p>備 注：<input type="text" name="notes" /></p>
 <p><input type="submit" name="sub" /></p>
 </form>
 <script type="text/javascript">
 $(function(){
 $('#infos').validate({
 debug:false, //false表示驗(yàn)證通過后不要自動(dòng)提交表單
 onkeyup:false, //表示關(guān)閉按鍵松開時(shí)候監(jiān)聽驗(yàn)證
 rules:{ //驗(yàn)證規(guī)則
 username:{
 required:true, //必填字段
 rangelength:[6,10] //長度在6-10之間
 },
 nums:{
 required:true,
 digits:true
 },
 notes:"required"
 },
 messages:{ //自定義錯(cuò)誤信息，默認(rèn)為英文，除了在這里配置以為，還可以通過配置文件進(jìn)行配置
 username:{
 required:"用戶名必填",
 rangelength:"用戶名長度必須為6-10位"
 },
 nums:{
 required:"工作號(hào)必填",
 digits:"工作號(hào)必須為數(shù)字"
 },
 notes:"備注必填"
 },
 //驗(yàn)證通過可以在這里做你想做的事情
 submitHandler:function(form){
 alert("驗(yàn)證通過");
 }
 });
 });
 </script>
</body>
</html>

源碼下載：jquery validate.js表單驗(yàn)證入門實(shí)例

演示地址：jquery validate.js表單驗(yàn)證入門實(shí)例

以上就是為大家提供的一個(gè)簡單的jquery validate.js表單驗(yàn)證入門實(shí)例，歡迎大家共同學(xué)習(xí)，希望對(duì)大家的學(xué)習(xí)有所幫助。

您可能感興趣的文章: