使用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/