Bootstrap Validator 表单验证

导入Validator

<link rel="stylesheet" type="text/css" href="/bootstrap-3.3.7-dist/css/bootstrapValidator.css"/>
<script type="text/javascript" src="/bootstrap-3.3.7-dist/js/bootstrapValidator.min.js"></script>

示例

	$(function() {
		$('#addform').bootstrapValidator({
			message: 'This value is not valid',
			feedbackIcons: {
				valid: 'glyphicon glyphicon-ok',
				invalid: 'glyphicon glyphicon-remove',
				validating: 'glyphicon glyphicon-refresh'
			},
			createUsera: { //验证标签的name值
				validators: {
					notEmpty: { //验证的规则
						message: '创建人不能为空', //提示
					}
				}
			}
		});
	});

常用验证规则

1.判断字段是否为空

notEmpty: {
message: ‘用户名必填不能为空’
}
2.字段长度判断

stringLength: {
min: 6,
max: 30,
message: ‘用户名长度不能小于6位或超过30位’
}
3.通过正则表达式进行验证

regexp: {
regexp: /¹+$/i,
message: ‘名字只能由字母字符和空格组成。’
}
4.大小写验证

stringCase: {
message: ‘姓氏必须只包含大写字符。’,
case: ‘upper’//其他值或不填表示只能小写字符
}
5.两个字段不相同的判断

different: {
field: ‘password’,
message: ‘用户名和密码不能相同。’
}
6.email验证

emailAddress: {
message: ‘The input is not a valid email address’
}
7.日期格式验证

date: {
format: ‘YYYY/MM/DD’,
message: ‘日期无效’
}
8.纯数字验证

digits: {
message: ‘该值只能包含数字。’
}

参考：

https://blog.csdn.net/asd245025733/article/details/78061577

Ajax验证

js部分

	remote: {
	    url: '/user/verification',//验证码
	    message: '验证码不正确',//提示消息
	    delay : 500,//每秒验证一次
	    type: 'POST',//请求方式
	}

后端部分

@RequestMapping("/verification")    @ResponseBody
    public Map verification(String checkCode, HttpSession session){
        String code = (String) session.getAttribute("code");
        Map<String, Boolean> map = new HashMap<>();
        if (code!= null && code.equalsIgnoreCase(checkCode)){
            map.put("valid", true);
        }else {
            map.put("valid", false);
        }
        return map;
    }

返回值部分需要以json格式返回
{“valid”,true} //表示验证通过
{“valid”,false} //表示验证未通过

参考

https://www.jb51.net/article/93085.htm

官网

http://1000hz.github.io/bootstrap-validator/

---

1. A-Z\s ↩︎