使用jquery.validate.js实现boostrap3的校验和验证
Posted Microtiger
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用jquery.validate.js实现boostrap3的校验和验证相关的知识,希望对你有一定的参考价值。
使用jquery.validate.js实现boostrap3的校验和验证
boostrap3验证框架
jquery.validate.js校验表单
效果见下图:
一、插件下载
官网下载地址: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
以上是关于使用jquery.validate.js实现boostrap3的校验和验证的主要内容,如果未能解决你的问题,请参考以下文章
最小最大价格范围验证不适用于 jquery.validate.js
怎样更灵活的是使用jquery.validate--未完待续
jquery.validate.js使用之自定义表单验证规则