Use of bootstrapValidator

web section

 

<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">Login account</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 code

 

 

<script type="text/javascript">

$(document).ready(function() {

    $('#form').bootstrapValidator({
        message: 'This value cannot be empty',
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            code: {
                validators: {
                    notEmpty: {},
					stringLength: {
						min: 6,
						max: 50
					},
                     threshold: 6 , //Ajax request is sent only if there are more than 6 characters, (enter a character in the input, the plugin will send it to the server once, set the limit, and start after 6 characters or more)
                     remote: {//ajax authentication. server result:{"valid":true or false} Send the current input name value to the service and get a json data. Example means correct: {"valid":true}  
                         url: '/user/validate_code',//validate address
                         message: 'The account already exists',//Prompt message
                         delay : 1000,//Every time you enter a character, an Ajax request is sent, the server pressure is still too high, set to send ajax every 2 seconds (by default, enter a character, submit once, the server pressure is too high)
                         type: 'get',//request method
						 dataType: 'json',
                        /**Custom submit data, the default value submits the current 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>

 Asynchronous verification of interactive java code (remote part)

 

 

 

@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}";
    }

 

 

A lot of information on the Internet writes the json return value as

{\"valid\",false}

Pay attention here

In short, bootstrap Validator is very good and powerful, and it is recommended to use it.