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

前言

• 在我们在做增删改查的时候，一般会遇到添加和修改的from表单需要表单验证。

• 一般常规的from表单是有自己的验证规则，from加一个 :rules=”rules“但他需要v–model值和prop值要一样，这是常规情况。

• 我遇到的是，绑定多个负责人和对应的电话，加验证规则。

实际场景

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

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

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

select多选

下拉框数据

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

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

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

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

输入框表单事件

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

自定义表单验证在data下面写 在rules里面直接通过validator用 下面有代码

实际操作

1.添加form表单数据

<el-form-item label="负责人" prop="principalopen">
          <!-- <el-input v-model.number="form.contact" autocomplete="off"></el-input> -->
         // 多选下拉框
         // 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) => {
      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'
          }
        ]
      },

总结：

经过这一趟流程下来相信你也对 Vue Element Select选择器自定义验证规则 有了初步的深刻印象，但在实际开发中我 们遇到的情况肯定是不一样的，所以我们要理解它的原理，万变不离其宗。加油，打工人！

什么不足的地方请大家指出谢谢 — 風过无痕

代码007普通

打赏 收藏 海报 链接