vue 表单验证，关于 trigger: 'blur'，trigger: "change" 和 validator 之间有什么关联？

• Z时代
• 2024-02-13
• 分类：IT

项目升级，原来的选择器需要改为支持多选，所以页面绑定的值也就由字符串变成了字符串数组，

但是表单验证规则不变，之前的单选是必选项，现在的多选也要至少选择一项。

所以需要自定义验证规则，将原配置项中的 required: true 改为了 validator:validatorFun,

组件完整代码如下：

<template>
  <div>
    <el-form ref="form" :rules="rules" :model="form" >
      <el-row>
          <div class="grid-content bg-purple">
            <el-form-item label="对照输入框"  prop="phone" >
                <el-input v-model="form.phone" maxlength="11" placeholder="请输入" />
            </el-form-item>
          </div>
        <div >
          <el-form-item label="多选列表"  prop="itemList" >
            <el-select style="width: 100%" v-model="form.itemList"  multiple>
              <el-option v-for="(item,index) in itemList" :key="index" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </div>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="funcSubmit">提交</el-button>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import 'xe-utils'
import VXETable from 'vxe-table'
import 'vxe-table/lib/index.css'
Vue.use(VXETable)
export default {
  name: 'VcName',
  data() {
    // 自定义表单验证函数
    const validatoritemList=(rule, value, callback)=>{
      if(value && value.length!=0){  callback() }
      else{ callback(new Error()) }
    }
    return {
      form: {
        phone:'',
        itemList:[],
      },
      // 可以选择的列表
      itemList:[
        {label:'1',value:'1'},
        {label:'2',value:'2'},
        {label:'3',value:'3'}
      ],
      // 表单验证规则
      rules: {
        phone:[{ required: true, message:'请输入', trigger: "blur"}],
        itemList: [{ required: true, validator:validatoritemList, message:'请选择', trigger: "blur"}]
      }
    }
  },
  methods: {
    // 提交
    funcSubmit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {console.log('验证成功') }
        else {return false }
      })
    },
  }
}
</script>

trigger 值为 ‘change’ 时已排查到原因，值为 ‘blur’ 时选择器失焦却不会验证进行验证，只有提交的时候才会验证，作为对比的 el-input 用普通的必填验证就可以正常提示输入信息。这是怎么引起的？该怎么解决？

回答：

当trigger为change的时候，页面关闭调用form的clearvalidate应该可以避免打开就执行的问题

回答：

多选时，选择器v-model绑定的初始属性要改成空数组，例如：[]
itemList校验加个type字段,trigger:change

itemList: [{ type: 'array', required: true, validator:validatoritemList, message:'请选择', trigger: "change"}]

以上是 vue 表单验证，关于 trigger: 'blur'，trigger: "change" 和 validator 之间有什么关联？ 的全部内容， 来源链接： utcz.com/p/934181.html