Jquery的validate表單驗證
阿新 • • 發佈：2019-01-09
Jquery的validate的表單驗證功能學習
③匯入
validate是jQuery外掛，及必須在jQuery的基礎上進行執行。我們將匯入jQuery庫、validate庫、和國際化資源庫（可選）
<!--依賴的jQuery庫-->
<script src="../js/jquery-1.11.0.js" type="text/javascript" charset="utf-8" />
<!--validate校驗庫-->
<script src="../js/jquery.validate.js" type="text/javascript" charset="utf-8" ④使用前提
validate需要手動的宣告
<script type="text/javascript">
$().ready(function () {
$("#formId").validate();
});
</script>⑤檢驗器查詢表
| 校驗型別 | 取值 | 描述 |
|---|---|---|
| required | true/false | 必填欄位 |
| “@”或者”email” | 郵件地址 | |
| url | 路徑 | |
| date | 數字 | 日期 |
| dateISO | 字串 | 日期（YYYY-MM-dd） |
| number | 數字（負數，小數） | |
| digits | 整數 | |
| minlength | 數字 | 最小長度 |
| maxlength | 數字 | 最大長度 |
| rangelength | [minL,maxL] | 長度範圍 |
| min | 最小值 | |
| max | 最大值 | |
| range | [min,max] | 值範圍 |
| equalTo | jQuery表示式 | 兩個值相同 |
| remote | url路徑 | ajax校驗 |
⑥檢驗方式：js 程式碼
語法：
$(…).validate({
rules:{},
messages:{}
});
rules 規則語法：
rules:{
欄位名:”校驗器”,
欄位名:”校驗器”
}
校驗器語法：
語法1：”校驗器”
語法2：{校驗器:”取值”,校驗器:”取值”,…}
message 提示語法：
message:{
欄位名:{校驗器:”提示”,校驗器:”提示”,…}
}
⑦案例
$("#formId").validate({
rules:{
username:"required",
password:{
required:true,
rangelength:[2,5]
},
repassword:{
equalTo:"[name='password']"
}
},
messages:{
username:{
required:"不能為空"
},
password:{
rangelength:"長度{0}-{1}之間"
}
}
});⑧程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
<!--validate校驗庫-->
<script type="text/javascript" src="../js/jquery.validate.js"></script>
<!--國際化庫，中文提示-->
<script type="text/javascript" src="../js/messages_zh.js"></script>
<script type="text/javascript">
$(function() {
$("#formId").validate({
rules: {
username: "required",
password: {
required: true,
digits: true
},
repassword: {
equalTo: "[name='password']"
}
},
messages: {
username: "不可以為空",
password: {
required: "密碼不可以為空",
digits: "請輸入數字"
}
}
});
})
</script>
</head>
<body>
<form id="formId" action="">
必填：<input type="text" name="username" /> <br/>
必填數字：<input type="text" name="password" /> <br />
必填重複：<input type="text" name="repassword" /> <br />
最小值：<input type="text" name="zuixiaozhi" /> <br />
區間：<input type="text" name="shuzhiqujian" /> <br />
<input type="submit" value="提交" />
</form>
</body>
</html>效果圖：
