詳解jQuery validate插件

一、Validate插件描述

   Validate是基於jQuery的一款輕量級驗證插件，內建豐富的驗證規則，還有靈活的自訂規則接口，HTML、CSS與JS之間的低耦合能讓您自由佈局和豐富樣式，支援input,select,textarea的驗證。

二、設定方法

需要先匯入Jquery庫，然後再匯入Validate外掛。而且兩個插件有一定的先後順序。 （jquery庫-Validate外掛程式）

<script type="text/javascript" src="js/jquery-1.9.1.js?1.1.10" ></script>
<script type="text/javascript" src="js/jquery.validate.min.js?1.1.10" ></script>

js程式碼如下：

<script type="text/javascript">
$(function(){
$(&#39;#demoForm&#39;).validate({
rules:{
//指的是input 的 name的名字
username:{
required:true,
minlength:6,
maxlength:9
},
password:{
required:true,
minlength:6,
maxlength:9
},
age:{
min:18,
max:80,
//range:[18,80],
//r                         angelength:[2,3],
digits:true
},
date:{
required:true,
dateISO:true,
}
},
messages:{
username:{
required:&#39;此项必填&#39;,
minlength:&#39;用户名最小是6位&#39;,
maxlength:&#39;用户名最大是9位&#39;
},
password:{
required:&#39;此项必填&#39;,
minlength:&#39;密码最小是6位&#39;,
maxlength:&#39;密码最大是9位&#39;
},
age:{
min:&#39;最小18岁&#39;,
max:&#39;最大80岁&#39;,
//range:&#39;年龄必须是18-80之间&#39;,
//                          rangelength:&#39;2-3位数&#39;,
digits:&#39;年龄必须是正整数&#39;
},
date:{
required:&#39;必填&#39;,
dateISO:&#39;日期格式不合法&#39;
}
}
})
})
</script>

html程式碼如下：

<form id="demoForm">
<p>
<label for="user">username</label>
<input type="text" name="username" id="user"/>
</p>
<p>
<label for="pass">password</label>
<input type="text" name="password" id="pass"/>
</p>
<p>
<label for="age">age</label>
<input type="text" name="age" id="age"/>
</p>
<p>
<label for="date">date</label>
<input type="text" name="date" id="date"/>
</p>
<p>
<input type="submit" value="提交" id="btn"/>
</p>
</form>

解釋一下程式碼：

#$ ('#demoForm').validate({})表單元素來呼叫validate

rules：傳回元素的驗證規則，預設提示的錯誤訊息是英文的

messages 處，可以自訂規則，如果某個控制項沒有message，將呼叫預設的資訊

預設校驗規則：

##1required:true必須輸入的欄位。 2remote:"check.php"使用 ajax 方法呼叫 check.php 驗證輸入值。 3email:true必須輸入正確格式的電子郵件。 4url:true必須輸入正確格式的網址。 5date:true必須輸入正確格式的日期。日期校驗 ie6 出錯，慎用。 6dateISO:true必須輸入正確格式的日期（ISO），例如：2009-06-23，1998/01/ 22。只驗證格式，不驗證有效性。 7number:true必須輸入合法的數字（負數，小數）。 8digits:true必須輸入整數。 9creditcard:必須輸入合法的信用卡號碼。 10equalTo:"#field"輸入值必須和 #field 相同。 11accept:輸入擁有合法後綴名的字串（上傳檔案的後綴）。 12maxlength:5#輸入長度最多是 5 的字串（漢字算一個字元）。 13minlength:10#輸入長度最小是 10 的字串（漢字算一個字元）。 14rangelength:[5,10]輸入長度必須介於5 和10 之間的字串（漢字算一個字符）。 15range:[5,10]輸入值必須介於 5 和 10 之間。 16max:5輸入值不能大於 5。 17min:10輸入值不能小於 10。

以上是詳解jQuery validate插件的詳細內容。更多資訊請關注PHP中文網其他相關文章！