BootstrapValidator实现注册校验和登录错误提示效果

使用BootstrapValidator进行注册校验和登录错误提示，具体内容如下

1、介绍

在AdminEAP框架中，使用了BootstrapValidator校验框架，本文以注册校验的用户名、登录名、密码、确认密码的校验（后面还有时间区间、服务器校验）为例，讲述BootstrapValidator的使用。同时以登录错误提示为例，说明如何在动态改变组件的错误提示信息。

先看下面的注册与登录的校验效果图：

注册校验：

登录错误提示：根据不同的错误类型，动态改变组件的样式和错误提示内容

2、注册校验

1、头部引入bootstrap-validator.css

复制代码 代码如下:

${basePath}为系统的路径变量

2、form组件

3、引入bootstrap-validator.js

4、校验的核心js代码

3、LoginValidator组件的代码 login.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('' + this.message + '');
}

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

以上把错误提示封装成了一个LoginValidator组件，方便前端调用，增强代码的可维护性，因为没有找到Bootstrap-validator改变错误提示的接口，所以查看了源码之后做了封装。

4、补充

1、时间区间校验

 "startTime":{
   validators:{
     date:{
format:'YYYY-MM-DD HH:mm',
message:'日期格式不正确'
     },
     callback:{
callback:function(value,validator){
  var startTime=value;
  var endTime=$("#endTime").val();
  if(startTime&&endTime){
    return DateDiff(endTime,startTime)>0;
  }else{
    return true;
  }

},
message:'结束时间不能小于开始时间'
     }
   }
 },
 "endTime":{
   validators:{
     date:{
format:'YYYY-MM-DD HH:mm',
message:'日期格式不正确'
     },
     callback:{
callback:function(value,validator){
  var startTime=$("#startTime").val();
  var endTime=value;
  if(startTime&&endTime){
    return DateDiff(endTime,startTime)>0;
  }else{
    return true;
  }

},
message:'结束时间不能小于开始时间'
     }

   }
 },

2、服务器校验

"jobClass": {
    validators: {
 notEmpty: {message: '执行类名不能为空'},
 remote:{
   url:basePath+"/job/checkJobClass",
   data: function(validator) {
     return {
jobClass:$('#jobClass').val(),
     };
   },
   message:'该执行类不存在'
 }
      }
    }

后台代码

 @RequestMapping(value="/checkJobClass",method = RequestMethod.POST)
  @ResponseBody
  public Map checkJobClass(String jobClass){
    Map map=new HashMap<>();
    try {
      Class objClass = Class.forName(jobClass);
      if(objClass!=null)
      map.put("valid", true);
      return map;
    } catch (Exception ex) {
      logger.error(ex.getMessage().toString());
      map.put("valid", false);
      return map;
    }
  }

Github： https://github.com/bill1012
AdminEAP：http://www.admineap.com

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。