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;
}
}