jquery.validata.js 插件

一、Validate插件描述

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

二、配置方法

需要先導入Jquery庫，然後導入Validate插件。而且兩個插件有一定的先後順序。（jquery庫-Validate插件）

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

js代碼如下：

<script type="text/javascript">

$(function(){
$('#demoForm').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:'此項必填',
minlength:'用戶名最小是6位',
maxlength:'用戶名最大是9位'
},
password:{
required:'此項必填',
minlength:'密碼最小是6位',
maxlength:'密碼最大是9位'
},
age:{
min:'最小18歲',
max:'最大80歲',
// range:'年齡必須是18-80之間',
// rangelength:'2-3位數',
digits:'年齡必須是正整數'
},
date:{
required:'必填',
dateISO:'日期格式不合法'
}
}
})
})
</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，將調用預設的信息

預設校驗規則：