jquery表單驗證框架 jquery.validate.min.js的使用
阿新 • • 發佈:2018-12-04
jquery表單驗證框架 jquery.validate.min.js的使用
http://www.cnblogs.com/linjiqin/p/3431835.html
<form id="formId" class="form-horizontal" action="${pageContext.request.contextPath}/loginUser/add?r=userList" method="post"> <input type="hidden" name="token" value="${token}" /> <div class="form-group"> <label class="col-sm-2 control-label">使用者名稱:</label> <div class="col-sm-6"> <input type="text" class="form-control col-sm-4" id="username" name="username" style="width: 250px"> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">密碼:</label> <div class="col-sm-6"> <input type="password" class="form-control col-sm-4" id="password" name="password" style="width: 250px"> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">性別:</label> <div class="col-sm-5"> <input id="id-button-borders" checked="" name="sex" type="checkbox" class="ace ace-switch ace-switch-4" /> <span class="lbl middle" data-lbl="男 女"></span> </div> </div> <div class="form-group"> <div class="col-md-offset-2 col-md-9"> <button class="btn btn-info btn-sm" type="submit" > <i class="ace-icon fa fa-check bigger-110"></i> 提交 </button> <button class="btn btn-sm" type="reset"> <i class="ace-icon fa fa-undo bigger-110"></i> 重置 </button> </div> </div> </form>
js
<script type="text/javascript"> $().ready(function() { // 在鍵盤按下並釋放及提交後驗證提交表單 $("#formId").validate({ submitHandler:function(form){ // alert("submit!"); form.submit(); }, rules: { username: { required: true, checkCode:true,//自定義表達驗證 minlength: 3, maxlength: 16, remote: { //非同步校驗 type: "post", url: "/loginUser/checkUser", data: { username: function() { return $("#username").val(); } }, dataType: "html", dataFilter: function(data, type) { if (data.code==0) return false; else return true; } } }, password: "required", }, messages: { username: { required: "請輸入使用者名稱,3-16個字元", minlength: "使用者名稱長度不能小於3個字元", maxlength: "使用者名稱長度不能大於16個字元", remote: "使用者名稱已存用" }, password: "請輸入輸入密碼", } }); //自定義正則表示式驗證方法 $.validator.addMethod("checkCode",function(value,element,params){ var checkCode = /^[0-9a-zA-Z_]{1,}$/; return this.optional(element)||(checkCode.test(value)); },"使用者名稱由字母數字下劃線組成!"); }); </script>
自定義正則表示式驗證
//自定義正則表示式驗證方法
$.validator.addMethod("checkCode",function(value,element,params){
var checkCode = /^[0-9a-zA-Z_]{1,}$/;
return this.optional(element)||(checkCode.test(value));
},"使用者名稱由字母數字下劃線組成!");
jQuery.validate的optional(element),用於表單控制元件的值不為空時才觸發驗證
使用
省略...
username: {
...省略
checkCode:true,
...省略
}
非同步驗證
remote: { //非同步校驗
type: "post",
url: "/loginUser/checkUser",
data: {
username: function() {
return $("#username").val();
}
},
dataType: "html",
dataFilter: function(data, type) {
if (data.code==0)
return false;
else
return true;
}
}