因为最近开发的项目前端使用了bootstrap框架，在前台数据校验的时候就考虑了bootstrapvalidator，整体效果不错，基本上可以快速的实现校验功能。

效果图

前台校验.png
后台数据校验.png

前端校验

1. 导入所需css和js

 <link href="static/assets/bootstrapvalidator/css/bootstrapValidator.css" rel="stylesheet" type="text/css">
 <script src="static/assets/bootstrapvalidator/js/bootstrapValidator.js"></script>

所需资源可以去官方下载，嫌麻烦的话，可以直接从我提供的百度云盘进行下载：链接：https://pan.baidu.com/s/1mjhovjy 密码：atwy

2. 进行前端校验，实现代码如下，仅供参考。

 $("#loginForm").bootstrapValidator({
                    submitHandler: function (valiadtor, loginForm, submitButton) {

                        valiadtor.defaultSubmit();
                    },
                    fields:{
                        username:{
                            validators:{
                                notEmpty: {
                                    message: '用户名不能为空'
                                },
                                stringLength: {
                                    /*长度提示*/
                                    min: 4,
                                    max: 30,
                                    message: '用户名长度必须在4到30之间'
                                }
                            }
                        },
                        password:{
                            validators:{
                                notEmpty: {
                                    message: '密码不能为空'
                                },
                                stringLength: {
                                    /*长度提示*/
                                    min: 4,
                                    max: 30,
                                    message: '密码长度必须在4到30之间'
                                }
                            }
                        }
                    }
                });
            });

后台数据校验

这里基于Thymeleaf，点击确认的时候会将一个表单数据整体提交给后台controller，进行数据处理之后，将数据存放到modelmap里面返回给前台，前台根据具体的返回数据做出对应的校验展示。

后台代码

mybatis和spring的整合，先进行service层的实现：根据登录名进行查询，能查询到则返回对象的详细信息，否则返回null。

@Service
public class OperatorSereviceImpl implements OperatorSerevice{
    @Autowired
    private OperatorMapper operatorMapper;

    /**
     * 查询操作员详细信息
     * @param op 传入的操作员查询信息
     * @return
     */
    @Override
    public Operator queryOperator(Operator op) {
        //通过username查询操作员
        String username = op.getUsername();
        OperatorExample example = new OperatorExample();
        example.createCriteria().andUsernameEqualTo(username);
        List<Operator> operatorList = operatorMapper.selectByExample(example);
        if(operatorList!=null && operatorList.size()>0){
            return operatorList.get(0);
        }else{
            return null;
        }
    }
}

关于注解的相关知识暂不多说。之后，则需要在controller层进行逻辑的处理，这里我们约定错误返回数据分为错误码和错误信息两个属性。其中错误码为1表示用户不存在，错误码为2表示密码错误。

@RequestMapping("/main")
    public String main(ModelMap model, HttpServletRequest request, Operator op){
        Operator searchOP = operatorSerevice.queryOperator(op);
        if(searchOP==null){
            model.put("error","该用户不存在！");
            model.put("code","1");
            return "admin/login";
        }else {
            if(searchOP.getPassword().equals(op.getPassword())){
                //比较输入密码，此时表示密码正确，跳转到主页面
                return "admin/index";
            }else{
                model.put("error","输入密码错误！");
                model.put("code","2");
                return "admin/login";
            }
        }

前台处理

前台需要接收modelmap里面的两个属性，在js代码里面进行属性的接收，之后直接进行数据的展示处理。

• 逻辑处理js

/**
 *
 * 登录异常信息显示
 */

function LoginValidator(config) {
    this.code = config.code;
    this.message = config.message;
    this.userName = config.userName;
    this.password = config.password;
    this.initValidator();
}

//0 未授权 1 账号问题 2 密码错误  3 账号密码错误
LoginValidator.prototype.initValidator = function () {
    if (!this.code)
        return;
    if(this.code==0){
        this.addPasswordErrorMsg();
    }else if(this.code==1){
        this.addUserNameErrorStyle();
        this.addUserNameErrorMsg();
    }else if(this.code==2){
        this.addPasswordErrorStyle();
        this.addPasswordErrorMsg();
    }else if(this.code==3){
        this.addUserNameErrorStyle();
        this.addPasswordErrorStyle();
        this.addPasswordErrorMsg();
    }
    return;
}

LoginValidator.prototype.addUserNameErrorStyle = function () {
    this.addErrorStyle(this.userName);
}

LoginValidator.prototype.addPasswordErrorStyle = function () {
    this.addErrorStyle(this.password);
}

LoginValidator.prototype.addUserNameErrorMsg = function () {
    this.addErrorMsg(this.userName);
}

LoginValidator.prototype.addPasswordErrorMsg = function () {
    this.addErrorMsg(this.password);
}


LoginValidator.prototype.addErrorMsg=function(field){
    $("input[name='"+field+"']").parent().append('<small  data-bv-validator="notEmpty" data-bv-validator-for="'+field+'" class="help-block">' + this.message + '</small>');
}

LoginValidator.prototype.addErrorStyle=function(field){
    $("input[name='" + field + "']").parent().addClass("has-error");
}

• 使用js接收modelmap数据，需要注意th:inline标签。

<script th:inline="javascript">
        var message=[[${error}]];
        var code=[[${code}]];
        if(message!=""){
            new LoginValidator({
                code:code,
                message:message,
                userName:'username',
                password:'password'
            });
        }
    </script>

综上，实现了基于bootstrapvalidator和thymeleaf框架的登录校验。