element form表单validateField对部分表单字段进行校验时触发多次校验

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

• 前言
• 一、为什么会触发多次？
• 二、使用示例
• 总结

---

前言

提示：这里可以添加本文要记录的大概内容：

今天做表单校验发现 element validateField 对部分表单校验的时候会触发多次， 网上搜索答案说rules的长度有几条就会触发几回 个人感觉有点偏 顺便记录下问题

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、为什么会触发多回？

触发多回是事件绑定的原因以及没有将elInput的validate-event关闭

下面贴出我的代码  大概场景是自定义校验规则 自定义失败文案和部分字段校验

二、使用步骤

1.引入库

代码如下（示例）：

<el-form-item label="手机号" prop="mobile" :inline-message="true" class="form-item-client">

     <el-input v-model.number="ruleForm.mobile" :validate-event="false"

        autocomplete="off" :validate-on-rule-change="false"

        @blur="validateFieldItem('mobile', 'mobileError')" placeholder="请输入手机号">

   </el-input>

     <span slot="error" class="err-msg">

         <i class="el-icon-warning" v-if="ruleForm.mobileError"></i>

        <i class="el-icon-loading" v-else="!ruleForm.mobileError" style="color:#409eff"></i>

        <span v-if="ruleForm.mobileError">{{ruleForm.mobileError}}</span>

   </span>

</el-form-item>

<el-form-item label="昵称" prop="username" autocomplete="off" :validate-on-rule-change="false" :inline-message="true" class="form-item-client">

      <el-input v-model="ruleForm.username"

        @blur="validateFieldItem('username', 'usernameError')"

         placeholder="用户昵称">

</el-input>

       <span slot="error" class="err-msg">

              <i class="el-icon-warning" v-if="ruleForm.usernameError"></i>

              <i class="el-icon-loading" v-else="!ruleForm.usernameError" style="color:#409eff"></i>

             <span v-if="ruleForm.usernameError">{{ruleForm.usernameError}}</span>

      </span>

</el-form-item>

2.rules

rules: {

      username: [

          { required: true, message: "请输入客户名称" },

          { min: 1, max: 15, message: "客户名称不能超过15个字符" },

          { validator: this.validateUserName }

      ],

      mobile: [

          { required: true, message: "请填写手机号码" },

          { validator: this.validateIphone }

      ]

},

validateIphone(rule, value, callback) {
   const reg = /^1((34[0-8])|(8\d{2})|(([35][0-35-9]|4[579]|66|7[35678]|9[1389])\d{1}))\d{7}$/;
   if (!reg.test(value)) {
       callback(new Error('您输入的手机格式错误!'))
   } else {
        callback()
   }
},
validateUserName: validateClientName,
validateFieldItem(validateKey, validateErrorKey) {
    validateField.call(this, { validateKey, validateErrorKey });
},


const validateField = function ({validateKey, validateErrorKey}) {
    this.ruleForm[validateErrorKey] = "";
    this.$refs.ruleForm.validateField(validateKey, ((errorMessage) => {
        this.ruleForm[validateErrorKey] = errorMessage;
    }))
}

---

总结

1. 看情况设置 el-Input 属性 

validate-event   输入时是否触发表单的校验   boolean  -  true

2.要知道frm表单的trigger属性  别把事件添加重复了