elementUI中表单校验中，所有空值校验在用户点击“确定”按钮时才触发，失去焦点时只有有值，才进行其它有效性校验；

最新推荐文章于 2023-04-19 11:03:58 发布

原创

最新推荐文章于 2023-04-19 11:03:58 发布 · 3.5k 阅读

13 ·

CC 4.0 BY-SA版权

本文介绍在ElementUI中实现特殊表单校验需求的两种方法：通过设置validate-event属性控制校验时机，以及利用动态绑定class和失焦事件自定义校验逻辑。

现在有这样一个变态的需求吧，在elementUI表单校验中，所有空值校验在用户点击“确定”按钮时才触发，失去焦点时只有有值，才进行其它有效性校验；
也就是说，必填项为空，我失去焦点，是不能给出提示的，表单也不能标红；失去焦点只能校验其他规则，比如邮箱格式，手机号格式等；当我点击提交或确定按钮，所有的为空的表单给出提示，且标红。
下图为效果图：
在这里插入图片描述
如果你看过elementUI底层源码，你就知道这个校验规则是用的第三方开源库，async-validator

当你在规则中写入{ required: true, trigger: ‘blur’ }
他还是会有提示信息。这时候你会发现是不能进行通过改底层代码来实现这个特殊的需求。

下面介绍一下如何实现：
方式一：简便，适合复杂表单
思路：在表单元素input标签或者其他绑定v-model的标签上加入

:validate-event="这里写三目运行进行设置为true还是false"
false代表不校验，true代表检验

具体代码如下：

<el-form :model="form" ref="form" label-width="100px" class="demo-dynamic">
      <el-form-item
        prop="email"
        label="邮箱"
        :rules="[
      {
   
    required: true, message: '请输入邮箱地址', trigger: 'blur' },
      {
   
    type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
    ]"
      >
        <el-input v-model="form.email" :validate-event="form.email==''?false:true"></el-input>
      </el-form-item>
      <el-form-item
        label="域名"
        prop="domains"
        :rules="{
   
   
          required:

最低0.47元/天解锁文章