3、引入bootstrap-validator.js

4、校驗(yàn)的核心js代碼

3、LoginValidator組件的代碼 login.js

/**
 * Created by billJiang on 2017/1/12.
 * 登錄異常信息顯示
 */

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

//0 未授權(quán) 1 賬號(hào)問題 2 密碼錯(cuò)誤 3 賬號(hào)密碼錯(cuò)誤
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");
}

以上把錯(cuò)誤提示封裝成了一個(gè)LoginValidator組件，方便前端調(diào)用，增強(qiáng)代碼的可維護(hù)性，因?yàn)闆]有找到Bootstrap-validator改變錯(cuò)誤提示的接口，所以查看了源碼之后做了封裝。

4、補(bǔ)充

1、時(shí)間區(qū)間校驗(yàn)

 "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:'結(jié)束時(shí)間不能小于開始時(shí)間'
            }
          }
        },
        "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:'結(jié)束時(shí)間不能小于開始時(shí)間'
            }

          }
        },

2、服務(wù)器校驗(yàn)

"jobClass": {
    validators: {
        notEmpty: {message: '執(zhí)行類名不能為空'},
        remote:{
          url:basePath+"/job/checkJobClass",
          data: function(validator) {
            return {
              jobClass:$('#jobClass').val(),
            };
          },
          message:'該執(zhí)行類不存在'
        }
      }
    }

后臺(tái)代碼

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

感謝各位的閱讀！關(guān)于“Bootstrap中Validator如何實(shí)現(xiàn)注冊校驗(yàn)和登錄錯(cuò)誤提示效果”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

分享至：

   

關(guān)于我們

公司簡介 發(fā)展歷程

服務(wù)項(xiàng)目

高端網(wǎng)站建設(shè) 小程序開發(fā) APP開發(fā) 網(wǎng)絡(luò)營銷

建站知識(shí)

網(wǎng)站建設(shè) 網(wǎng)站設(shè)計(jì) 網(wǎng)站制作 小程序

聯(lián)系我們

公司地址 人才招聘

成都 重慶



電話：028-86922220



地址：成都市太升南路288號(hào)錦天國際A幢1002號(hào)



電話：028-86922220



地址：重慶市南岸區(qū)彈子石騰龍大道58號(hào)2棟21-6

版權(quán)所有：成都創(chuàng)新互聯(lián)科技有限公司重慶分公司 渝ICP備2021005571號(hào)-4