使用jquery.validate.js实现boostrap3的校验和验证
boostrap3验证框架
jquery.validate.js校验表单
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>.
蕃薯耀 2015年9月15日 14:15:15 星期二
http://fanshuyao.iteye.com/
?
效果见下图：
?
?
?
?
一、插件下载
官网下载地址：http://jqueryvalidation.org/
或者在附件下载 jquery-validation-1.14.0.zip
?
二、加入js文件，依赖jquery
jquery.validate.min.js
additional-methods.min.js
messages_zh.min.js
additional-methods-custom.js ?（自己定义的校验方法扩展js文件）
?
三、验证表单
1、页面
?
<div class="w720 mt5 fr">
<div class="blue5 pt20 pb20 p10 user_password">
<form id="userInfoEditForm" class="form-horizontal">
<div class="form-group">
<label for="mobile" class="control-label">昵称：</label>
<div >
<input type="text" class="form-control" id="nickname" name="nickname" placeholder="请输入昵称" value="${userInSession.nickname}"/>
</div>
</div>
<div class="form-group">
<label for="mobile" class="control-label">姓名：</label>
<div>
<input type="text" class="form-control" id="realName" name="realName" placeholder="请输入真实姓名" value="${userInSession.realName}"/>
</div>
</div>
<div class="form-group">
<label for="tel1" class="control-label">性别：</label>
<div>
<select name="genders" id="genders" class="form-control">
<option value="">请选择…</option>
<c:forEach items="${genders}" var="gender">
<option value="${gender}" ${userInSession.genders eq gender?"selected=‘selected‘":""}>${gender.value}</option>
</c:forEach>
</select>
</div>
</div>
<div class="form-group">
<label for="tel2" class="control-label">联系地址：</label>
<div>
<input type="text" class="form-control" id="address" name="address" placeholder="请输入联系地址" value="${userInSession.address}"/>
</div>
</div>
<div class="form-group">
<div class="form-group-btn">
<button type="submit" id="btnUserInfoEdit2" class="btn btn-primary">确认</button>
</div>
</div>
</form>
</div>
</div>
?
2、js校验
var validateObj = $(‘#userInfoEditForm‘).validate({
ignore: "",
errorClass : ‘help-block‘,
focusInvalid : true,
rules : {
nickname : {
required : true
},
realName : {
required : true
},
genders : {
required : true
/* ,select2Reg : true */
},
address : {
required : true
}
},
messages : {
nickname : {
required : "昵称不能为空"
},
realName : {
required : "姓名不能为空"
},
genders : {
required : "请选择性别"
},
address : {
required : "地址不能为空"
}
},
onclick : function (element) {
$(element).valid();
},
onfocusout: function (element) {
$(element).valid();
},
highlight : function(element) {
//alert($(element).closest(‘.form-group‘).html());
$(element).closest(‘.form-group‘).removeClass(‘has-success‘).addClass(‘has-error‘);
},
success : function(label) {
label.closest(‘.form-group‘).removeClass(‘has-error‘).addClass(‘has-success‘);
label.remove();
},
errorPlacement : function(error, element) {
element.parent(‘div‘).append(error);
},
submitHandler : function(form) {
return false;
form.submit();//form.submit(); 或者$(form).ajaxSubmit();
}
});
$("#genders").change(function(){
$(this).valid();
});
?
3、自定义校验方法（additional-methods-custom.js）
/**
* 检查手机号码
* @since 2015-09-14
*/
jQuery.validator.addMethod("phoneReg", function(value, element) {
var value = $(element).val();
console.log("value = "+value)
return this.optional(element) || (checkPhone(value));
}, "请输入正确的11位手机号码");
?
四、详细使用见：http://fanshuyao.iteye.com/blog/2243580
?
五、select2校验问题见
http://fanshuyao.iteye.com/blog/2243544
?
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>.
蕃薯耀 2015年9月15日 14:15:15 星期二
http://fanshuyao.iteye.com/
使用jquery.validate.js实现boostrap3的校验和验证
原文：http://fanshuyao.iteye.com/blog/2243583