使用jquery.validate.js实现boostrap3的校验和验证

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