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" />
<!--國際化庫,中文提示(可選)-->
<script src="../js/messages_zh.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>
效果圖: