jQuery Validate表單驗證(使用者註冊簡單應用)
阿新 • • 發佈:2019-01-24
1.講解
1.1 Validate 要依賴jQuery的,所以HTML中js的引用關係如下:
<script type="text/javascript" src="../js/common/jquery-1.11.0.js" ></script>
<script type="text/javascript" src="../js/common/jquery-validation-1.14.0/jquery.validate.min.js" ></script>
<script type="text/javascript" src="../js/common/jquery-validation-1.14.0/additional-methods-common.js" ></script>
<script src="../js/controller/blog-validate.js" type="text/javascript" charset="utf-8"></script>
第一個就不用說了,第二個是驗證外掛(必須引用),第三個是自定義驗證規則,第四個我們自己的js
1.2 註冊form的結構:
<form class="am-form am-form-horizontal yf-form-tips add-form" >
<div class="am-form-group am-g-collapse">
<label for="addFormName" class="am-u-sm-2 am-form-label">使用者名稱: </label>
<div class="am-u-sm-10 yf-pl10">
<input type="text" id="" name="addFormName" placeholder="請輸入您的使用者名稱" class="" maxlength="20">
<span class="yf-error-tip"></span>
</div>
</div>
<div class="am-form-group am-g-collapse">
<label for="addFormName" class="am-u-sm-2 am-form-label">密碼: </label>
<div class="am-u-sm-10 yf-pl10">
<input type="password" id="password1" name="addFormPass1" placeholder="請輸入您的密碼" class="" maxlength="20">
<span class="yf-error-tip"></span>
</div>
</div>
<div class="am-form-group am-g-collapse">
<label for="addFormName" class="am-u-sm-2 am-form-label">確認密碼: </label>
<div class="am-u-sm-10 yf-pl10">
<input type="password" id="" name="addFormPass2" placeholder="請再次輸入您的密碼" class="" maxlength="20">
<span class="yf-error-tip"></span>
</div>
</div>
<div class="am-form-group am-g-collapse">
<label for="addFormPhone" class="am-u-sm-2 am-form-label">手機號: </label>
<div class="am-u-sm-10 yf-pl10">
<input type="text" id="" name="addFormPhone" placeholder="請輸入您的手機號" class="" maxlength="11">
<span class="yf-error-tip"></span>
</div>
</div>
<div class="am-form-group am-g-collapse">
<label for="addFormAdd" class="am-u-sm-2 am-form-label am-vertical-align-top yf-pt0">聯絡地址: </label>
<div class="am-u-sm-10 yf-pl10">
<textarea id="" placeholder="請輸入您的聯絡地址" name="addFormAdd" class="" maxlength="100"></textarea>
<span class="yf-error-tip"></span>
</div>
</div>
<div class="am-form-group am-g-collapse">
<div class="am-u-sm-offset-2 yf-pl10">
<button type="submit" class="am-btn am-btn-primary" onclick="submitInfo()">提交</button>
</div>
</div>
</form>
1.3 主要的js(blog-validate.js):
//表單驗證規則
var formValid = $(".add-form").validate({
rules: {
"addFormName":{
"required":true, //必填欄位
},
"addFormPass1":{
"required":true
},
"addFormPass2":{
"required":true,
"equalTo": "#password1" //輸入值必須和 #password1 相同
},
"addFormPhone":{
"required":true,
"digits":true, //必須輸入整數
"minlength":11 //輸入長度最小是 11
},
"addFormAdd":{
"required":true
}
},
messages: {
"addFormName":{
"required":"使用者名稱不能為空哦"
},
"addFormPass1":{
"required":"密碼不能為空哦"
},
"addFormPass2":{
"required":"確認密碼不能為空哦",
"equalTo":"兩次輸入的密碼不一致哦"
},
"addFormPhone":{
"required":"手機號不能為空哦",
"digits":"手機號格式不正確哦",
"minlength":"手機號格式不正確哦",
},
"addFormAdd":{
"required":"地址不能為空哦"
}
},
errorPlacement:function(error,element) {
error.appendTo(element.siblings(".yf-error-tip"));
}
});
//提交前開始驗證
var submitInfo = function(){
if($('.add-form').valid()){
alert('恭喜你,驗證通過了!');
};
}
說明:
主要通過 $('.add-form').valid()
觸發驗證;
提示資訊可在 errorPlacement
中配置放置的位置,提示預設的樣式是”error”,如需修改,參考validate ()
可選項中的”errorClass”
2.有幾個特別要注意的地方:
- validate ()的物件
$(".add-form")
對應的DOM標籤必須是form標籤 - 執行
$(".add-form").validate
時,form在HTML結構中是存在的,類似jquery的remove之後或者angularJs的ngIf,都會導致驗證失敗 validate()
的屬性”rules”必須對應驗證表單中標籤的name屬性- 驗證規則可以直接寫在HTML中(不推薦,提示資訊也不好處理),比如:
<input type="text" id="" name="addFormName" placeholder="請輸入您的使用者名稱" class="" maxlength="20" required minlength='2'>