使用BootstrapValidator进行注册校验和登录错误提示，具体内容如下
1、介绍
在AdminEAP框架中，使用了BootstrapValidator校验框架，本文以注册校验的用户名、登录名、密码、确认密码的校验（后面还有时间区间、服务器校验）为例，讲述BootstrapValidator的使用。同时以登录错误提示为例，说明如何在动态改变组件的错误提示信息。
先看下面的注册与登录的校验效果图：
注册校验：
登录错误提示：根据不同的错误类型，动态改变组件的样式和错误提示内容
2、注册校验
1、头部引入bootstrap-validator.css
复制代码 代码如下:
<link href="${basePath}/resources/adminlte/plugins/bootstrap-validator/dist/css/bootstrap-validator.css" />
${basePath}为系统的路径变量
2、form组件
<form action="${basePath}/oauth/register" method="post"> <input type="hidden" value="${oAuthInfo.oAuthId?default('-1')}"> <input type="hidden" value="${oAuthInfo.oAuthType?default('-1')}"> <div> <input type="text" placeholder="请输入用户名" required> <span></span> </div> <div> <input type="text" placeholder="请输入登录邮箱/登录名"> <span></span> </div> <div> <input type="password" placeholder="请输入密码"> <span></span> </div> <div> <input type="password" placeholder="再次确认密码"> <span></span> </div> <div> <div> <div> <label> <input type="checkbox" required> 同意遵循<a href="#" >AdminEAP协议</a> </label> </div> </div> <!-- /.col --> </div> <div> <div> <button type="submit">注 册</button> </div> </div> </form>
3、引入bootstrap-validator.js
<script src="https://www.jb51.net/${basePath}/resources/adminlte/bootstrap/js/bootstrap.min.js"></script>
4、校验的核心js代码
<script> $(function () { //将checkbox渲染为icheck样式 $('input').iCheck({ checkboxClass: 'icheckbox_square-red', radioClass: 'iradio_square-red', increaseArea: '20%' // optional }); //此处为校验的核心代码 $("#register-form").bootstrapValidator({ submitHandler: function (valiadtor, loginForm, submitButton) { valiadtor.defaultSubmit(); }, fields: { userName: { validators: { notEmpty: { message: '用户名不能为空' }, stringLength: { /*长度提示*/ min: 4, max: 30, message: '用户名长度必须在4到30之间' } } }, loginName: { validators: { notEmpty: { message: '登录邮箱名或用户名不能为空' }, stringLength: { /*长度提示*/ min: 4, max: 30, message: '用户名长度必须在4到30之间' }, threshold: 4,//只有4个字符以上才发送ajax请求 remote: { url: "${basePath}/oauth/checkUnique", data: function (validator) { return { loginName: $("#loginName").val(), userId: null }; }, message: '该登录名已被使用，请使用其他登录名', delay:2000 } } }, password: { validators: { notEmpty: { message: '密码不能为空' }, stringLength: { /*长度提示*/ min: 6, max: 30, message: '密码长度必须在6到30之间' }, different: {//不能和用户名相同 field: 'loginName',//需要进行比较的input name值 message: '不能和用户名相同' }, regexp: { regexp: /^[a-zA-Z0-9_\.]+$/, message: '密码由数字字母下划线和.组成' } } }, repassword: { message: '密码无效', validators: { notEmpty: { message: '密码不能为空' }, stringLength: { min: 6, max: 30, message: '用户名长度必须在6到30之间' }, identical: {//相同 field: 'password', message: '两次密码不一致' }, different: {//不能和用户名相同 field: 'loginName', message: '不能和用户名相同' }, regexp: {//匹配规则 regexp: /^[a-zA-Z0-9_\.]+$/, message: '密码由数字字母下划线和.组成' } } } } }); });
5、登录名唯一性校验的后台代码
/** * 校验当前登录名/邮箱的唯一性 * @param loginName 登录名 * @param userId 用户ID（用户已经存在，即又改回原来的名字还是唯一的） * @return */ @RequestMapping(value = "/oauth/checkUnique", method = RequestMethod.POST) @ResponseBody public Map checkExist(String loginName, String userId) { Map<String, Boolean> map = new HashMap<String, Boolean>(); User user = userService.getUserByLoginName(loginName); //用户不存在，校验有效 if (user == null) { map.put("valid", true); } else { //用户存在（存在的用户是当前用户，登录名一致，校验通过，否则校验不通过） if(!StrUtil.isEmpty(userId)&&userId.equals(user.getLoginName())){ map.put("valid",true); }else { map.put("valid", false); } } return map; }
以上的配置完成了注册文本框的各种校验，更多的校验内容，可以查看相关的bootstrap-validator的API文档。
3、登录错误动态提示