bootstrapValidator 的使用

web部分

 

<form class="form-horizontal" role="form" id="form" name="form" >
	<div class="form-body">
		<div class="form-group">
			<label class="col-md-3 control-label">登录账户</label>
			<span class="required">
				*
			</span>
			<div class="col-md-3">
				<input type="text" class="form-control input-sm" placeholder="" id="code" name="code">						
			</div>
		</div>
		<div class="form-group">
			<label class="col-md-3 control-label">昵称</label>
			<span class="required">
				*
			</span>
			<div class="col-md-3">
				<input type="text" class="form-control input-sm" placeholder="" id="name" name="name">						
			</div>
		</div>
	</div>
	<div class="form-actions fluid">
		<div class="col-md-offset-3 col-md-9">
			<button type="submit" class="btn green btn-primary">提交</button>
			<button type="reset" class="btn default" id="resetBtn">重置</button>
		</div>
	</div>
</form>

 JS代码

 

 

<script type="text/javascript">

$(document).ready(function() {

    $('#form').bootstrapValidator({
        message: '这个值不能为空',
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            code: {
                validators: {
                    notEmpty: {},
					stringLength: {
						min: 6,
						max: 50
					},
                     threshold: 6 , //有6字符以上才发送ajax请求，（input中输入一个字符，插件会向服务器发送一次，设置限制，6字符以上才开始）
                     remote: {//ajax验证。server result:{"valid":true or false} 向服务发送当前input name值，获得一个json数据。例表示正确：{"valid":true}  
                         url: '/user/validate_code',//验证地址
                         message: '账号已存在',//提示消息
                         delay :  1000,//每输入一个字符，就发ajax请求，服务器压力还是太大，设置2秒发送一次ajax（默认输入一个字符，提交一次，服务器压力太大）
                         type: 'get',//请求方式
						 dataType: 'json', 
                        /**自定义提交数据，默认值提交当前input value
						* data: function(validator) {
                            return {
                                layerType: $('input[name=layerType]:checked').val()
                            }
                        }*/
						                            
                     }
                }
            },
			name: {
                validators: {
                    notEmpty: {},
					stringLength: {
						min: 4,
						max: 50
					}
                }
            }
        },
		submitHandler: function (form) {
			success1.show();
			error1.hide();
		}

    })
	 .on('success.form.bv', function(e) {
		submitPageContent('/user/add_submit');
		return false;
	});

    $('#resetBtn').click(function() {
        $('#form').data('bootstrapValidator').resetForm(true);
    });
});
</script>

 异步验证交互java代码 （remote部分）

 

 

 

@ResponseBody
	@RequestMapping("validate_code")
    public String validateCode(HttpServletRequest request) {
		String code = request.getParameter("code");
		
		User user = userImpl.getByCode(code);
		
		if(user == null){
			return "{\"valid\":true}";
		}

		return "{\"valid\":false}";
    }

 

 

网上不少资料将json返回值写为

{\"valid\",false}

这里要注意

总之bootstrap Validator很好很强大，建议使用。