BootstrapValidator动态修改message消息

仲孙善

2023-12-01

关于Uncaught TypeError: Cannot read property 'message' of undefined错误

抱歉各位，最近发现使用callback的时候必须要返回一个boolean值，验证通过必须返回true，否则返回false

如果不返回值就会js报错【Uncaught TypeError: Cannot read property 'message' of undefined】

感谢CSDN帖子：https://blog.csdn.net/qq_21358931/article/details/78914960#updatemessage

最近在用bootstrapvalidator，业务要求验证一个字段，该字段需要与多个输入框的值进行比较判断，要改变提示消息，从09.18研究到09.19上午研究了一天多，百度上基本是找不到，bootstrapvalidator的api也找不到，网页打不开要挂梯子，难受呀，后来看了到大佬帖子搞定了：

我这里总结一下吧，主要使用validator.updateMessage();方法

validator.updateMessage('fildName如name','validator如callback','message如"不能含有关键字123"');

fields: {
  name: {
    tigger: 'change',
    validators: {
      notEmpty: {
        message: '请输入name'
      },
      callback: {
        message: 'name验证不通过',
        callback: function(value, validator) {
          if (value.indexOf('name') != -1) {
            validator.updateMessage('name', 'callback', '不能含有关键字name');
            return false;
          }
          if (value.indexOf('123') != -1) {
            validator.updateMessage('name', 'callback', '不能含有关键字123');
            return false;
          }
          return true;
        }
      }
    }
  }
}

不过大佬的意思是要修改源码,不然会出问题,我都试了没发现什么问题

我这里说明下源码的修改吧,因为源码里的代码都是压缩过没有格式的,所以我是把大佬的代码改为一个三元表达式了！
主要就是将bootstrapValidator.js和bootstrapValidator.min.js的

a(this).data("bv.messages").find('.help-block[data-bv-validator="'+c+'"][data-bv-for="'+b+'"]').html(d)

改为一个三元表达式

a(this).data('bv.messages').find('.help-block[data-bv-validator="'+c+'"][data-bv-for="'+b+'"]').find(".tip_message").html() == undefined ? a(this).data("bv.messages").find('.help-block[data-bv-validator="'+c+'"][data-bv-for="'+b+'"]').html(d) : a(this).data('bv.messages').find('.help-block[data-bv-validator="'+c+'"][data-bv-for="'+b+'"]').find(".tip_message").html(d);

这里把我写的一个测试页面的代码贴出来：

以下代码都有在线引用js和css

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
  <title>BootstrapValidation</title>
  <!-- 跨域属性 crossorigin="anonymous" -->
  <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
  <link rel="stylesheet" href="static/plugins/bootstrap-3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" crossorigin="anonymous">
  <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
  <link rel="stylesheet" href="static/plugins/bootstrap-3.3.7/css/bootstrap-theme.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" crossorigin="anonymous">
  <!-- bootstrapvalidator -->
  <link rel="stylesheet" href="static/plugins/bootstrapvalidator/css/bootstrapValidator.min.css">
  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap-validator/0.5.3/css/bootstrapValidator.min.css" crossorigin="anonymous">
  <style type="text/css">
    * {
      box-sizing: border-box !important;
      margin: 0 auto;
    }

    body{
      background: rgba(173, 113, 113, 0.8);
    }

    div.container-fluid {}

    #saveOrUpdateForm {
      width: 900px;
      height: auto;
    }

    .form-horizontal{
      background: rgba(255,255,255,255);
      padding: 30px;
    }
    .form-control{
      border-radius: 0px;
    }

    input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
      -webkit-appearance: none;
    }
     
    input[type="number"] {
      -moz-appearance: textfield;
    }
  </style>
</head>

<body>
  <div class="container-fluid text-center">
    <h1>Hello, Bootstrap, BootstrapValidator！</h1>
    <br>
  </div>
  <div class="container-fluid">
    <form class="form-horizontal" id="saveOrUpdateForm" action="saveOrUpdate">
      <div class="form-group">
        <label class="col-lg-3 control-label">Name:</label>
        <div class="col-lg-9">
          <input type="text" class="form-control" name="name" />
        </div>
      </div>
      <div class="form-group">
        <label class="col-lg-3 control-label">Sex:</label>
        <div class="col-lg-9">
          <input type="text" class="form-control" name="sex" />
        </div>
      </div>
      <div class="form-group">
        <label class="col-lg-3 control-label">Age:</label>
        <div class="col-lg-9">
          <input type="number" class="form-control" name="age" />
        </div>
      </div>
      <div class="form-group">
        <label class="col-lg-3 control-label">Phone:</label>
        <div class="col-lg-9">
          <input type="number" class="form-control" name="phone" />
        </div>
      </div>
      <div class="form-group">
        <label class="col-lg-3 control-label">Email:</label>
        <div class="col-lg-9">
          <input type="text" class="form-control" name="email" />
        </div>
      </div>
      <div class="form-group">
        <label class="col-lg-3 control-label"></label>
        <div class="col-lg-9">
          <div class="col-lg-6"><input class="btn btn-default" style="float: right;" type='button' onclick="formClean()" value="Clean"/></div>
          <div class="col-lg-6"><input class="btn btn-default" style="float: left;" type='button' onclick="formSubmit()" value="Submit"/></div>
        </div>
      </div>
    </form>
  </div>

  <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
  <script type="text/javascript" src="static/plugins/jquery/jquery-3.3.1.min.js"></script>
  <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js" crossorigin="anonymous"></script>
  <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
  <script type="text/javascript" src="static/plugins/bootstrap-3.3.7/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>
  <!-- bootstrapvalidator -->
  <script type="text/javascript" src="static/plugins/bootstrapvalidator/js/bootstrapValidator.js"></script>
  <script type="text/javascript" src="https://cdn.bootcss.com/bootstrap-validator/0.5.3/js/bootstrapValidator.min.js" crossorigin="anonymous"></script>

  <script>
    $(function() {
      initFormValidator();
    });
    
    function formClean(){
      $('#saveOrUpdateForm input[type != "button"]').val('');
    }

    function initFormValidator(){
      $("#saveOrUpdateForm").bootstrapValidator({
        excluded: [':disabled', ':hidden', ':not(:visible)']
        ,feedbackIcons: {
          valid: 'glyphicon glyphicon-ok'
          ,invalid: 'glyphicon glyphicon-remove'
          ,validating: 'glyphicon glyphicon-refresh'
        }
        ,message: '该字段验证不通过'
        ,fields: {
          name: {
            tigger: 'change'//trigger: 'focus blur keyup keydown change'
            ,validators: {
              notEmpty: {
                message: '请输入name'
              }
              ,stringLength: {
                min: 1
                ,max: 5
                ,message: '字符长度限制1到5位'
              }
              ,callback: {
                message: 'name验证不通过'
                ,callback: function(value, validator){
                  if(value.indexOf('name') != -1){
                    validator.updateMessage('name','callback','不能含有关键字name');
                    return false
                  }
                  if(value.indexOf('123') != -1){
                    validator.updateMessage('name','callback','不能含有关键字123');
                    return false
                  }
                  return true;
                }
              }
            }
          }
          ,sex: {
            trigger: 'change'
            ,validators: {
              notEmpty: {
                message: '请输入sex'
              }
              ,callback :{
                message: '只能输入0或1'
                ,callback: function(value, validator) {
                  if(value != '0' && value != '1'){
                    return false;
                  }
                  return true;
                }
              }
            }
          }
          ,age: {
            validators: {
              notEmpty: {
                message: '请输入age'
              }
              ,callback: {
                message: '请输入正确的年龄'
                ,callback: function(value, validator) {
                  if(value * 1 < 0 || value * 1 > 200){
                    return false;
                  }
                  return true;
                }
              }
            }
          }
          ,phone: {
            validators: {
              notEmpty: {
                message: '请输入phone'
              }
              ,regexp: {
                regexp: /^[1][3,4,5,7,8][0-9]{9}$/,
                message: '请输入正确的手机号'
              }
            }
          }
          ,email: {
            validators: {
              notEmpty: {
                message: '请输入email'
              }
            }
          }
        }
        //,submitHandler: function(validator, form, submitButton) {//提交请求
          //validator.defaultSubmit();
          //或
          //ajax提交表单,请求地址url,请求参数data,success回调,返回类型dataType
          //$.post(form.attr('action'), form.serialize(), function(result){
          //}, 'json');
        //}
      });
    }

    function formSubmit(){
      /*
      //重置某一单一验证字段验证规则
      $(formName).data("bootstrapValidator").updateStatus("fieldName",  "NOT_VALIDATED",  null );
      //重置表单所有验证规则
      $(formName).data("bootstrapValidator").resetForm();
      //触发全部验证
      $(formName).data("bootstrapValidator").validate();
      //触发指定字段的验证
      $(formName).data("bootstrapValidator").validateField('fieldName');
      //获取当前表单验证状态,flat = true or false
      var flag = $(formName).data("bootstrapValidator").isValid();
      //根据指定字段名称获取验证对象,element = jq对象 / null
      var element = $(formName).data("bootstrapValidator").getFieldElements('fieldName');
      //触发验证
      $("buttonName").on("click", function(){
        //获取表单对象
        var bootstrapValidator = form.data('bootstrapValidator');
          //手动触发验证
          bootstrapValidator.validate();
          if(bootstrapValidator.isValid()){
              //表单提交的方法、比如ajax提交
          }
      });
      */

      // 此处3行代码清除bootstrapValidator上一次表单验证的验证样式
      initFormValidator(); // 表单校验,没有这一步,下面destroy和null会报错
      $('#saveOrUpdateForm').data('bootstrapValidator').destroy();
      $('#saveOrUpdateForm').data('bootstrapValidator', null);
  
      // 添加校验规则,校验规则应该在填入数据前执行,否则会清空form表单数据,也就是说别在点提交按钮的时候执行
      initFormValidator();

      var validatorForm = $('#saveOrUpdateForm').data('bootstrapValidator');//获取表单对象
      validatorForm.validate();// 手动触发全部校验,防止没获得焦点的元素不触发校验
      if (!validatorForm.isValid()) { // 获取校验结果,true false
        return;
      }
      alert('form表单校验通过,提交form表单');
    }
  </script>
</body>

</html>

以上代码都有在线引用js和css

抱歉各位，最近发现使用callback的时候必须要同时返回一个boolean值，验证通过必须返回true，否则返回false

如果不返回值就会js报错【Uncaught TypeError: Cannot read property 'message' of undefined】

20191011更新：

修复Uncaught TypeError: Cannot read property 'message' of undefined错误

BootstrapValidator动态修改message消息

相关阅读

相关文章

相关问答

相关文档