Vue Element Select选择器自定义验证规则

本文介绍: 在我们在做增删改查的时候，一般会遇到添加和修改的fro m 表单需要表单验证。一般常规的fro m 表单是有自己的验证规则，fr o m加一个 :rules=”rules“但他需要 v–model值和prop值要一样，这是常规情况。我遇到的是，绑定多个负责人和对应的电话，加验证规则。实际场景1.我们在fr o m 表单绑定多个负责人就需要使用到 select 选择器，下拉的数据是点击打开弹框时发请求来的。2.点击选中的时候，数据时对象形式，id 名字电话绑定在一起的。选中负责人的时候，我们是把一整个对象存到数组里面。

前言

在我们在做增删改查的时候，一般会遇到添加和修改的fr o m 表单需要表单验证。
一般常规的fr o m 表单是有自己的验证规则，fr om加一个 :rule s=”rule s“但他需要 v–model值和prop值要一样，这是常规情况。
我遇到的是，绑定多个负责人和对应的电话，加验证规则。

实际场景

1.我们在fr om表单绑定多个负责人就需要使用到 select 选择器，下拉的数据是点击打开弹框时发请求来的。

2.点击选中的时候，数据时对象形式，i d 名字电话绑定在一起的。选中负责人的时候，我们是把一整个对象存到数组里面

3.因为我们用的是select 下拉多选，也不能用常规的验证规则，他会不起作用，我们要写from表单自定义验证规则

s el e ct 多选

下拉框数据

{
    id: '1',
    name: '秦大大',
    phonf: '15220730439'
   },

s elect 下拉款选中时绑定的是对象

我们只需要给他绑定一个属性，value就可以直接绑定对象具体下面有代码

 // 这个值最好是id 是唯一的
  value-key="id"

输入框表单事件

获取焦点：focus
失去焦点：blur
输入事件input
变化事件change

自定义表单验证在data下面写在rule s里面直接通过 valid a t or用下面有代码

实际操作

1.添加 form表单数据

&lt;el-form-item label="负责人" prop="principalopen"&gt;
          &lt;!-- &lt;el-input v-model.number="form.contact" autocomplete="off"&gt;&lt;/el-input&gt; --&gt;
         // 多选下拉框
         // multiple 多选
         // value-key="id" 给value绑定为一只 这样value就可以选中item
         <el-select
            v-model="principalopen"
            multiple
            value-key="id"
            placeholder="请选择负责人"
            style="width: 100%"
          &gt;
          // 下拉框数据
            <el-option
              v-for="item in principal"
              :key="item.id"
              :label="item.name"
              :value="item"
            &gt;
            </el-option&gt;
          </el-select&gt;
        </el-form-item&gt;

2.因为是一个数组自定义验证规则写在data 下面官网from表单也有介绍

export default {
  data() {
    // 自定义验证规则
    var picValidator = (rule, value, callback) =&gt; {
      if (!this.principalopen.length) {
        // 一定要写 callBack() 验证完成时调用的回调函数 https://github.com/yiminghe/async-validator
        callback(new Error('校验：联系人不能为空，请选择'))
      } else {
        callback()
      }
    }
    return {}
  }
 }

3.data 里面的表单验证

rules: {
        principalopen: [
          { 
            // 是否必填 没有这个就没有前面红点
            required: true,
            // 自定义验证规则
            validator: picValidator,
            //  触发事件
            trigger: 'blur'
          }
        ]
      },