Vue在表单校验中trigger属性指定何时触发校验规则

Vue在表单校验中trigger属性指定何时触发校验规则

• • 一、前言
  • 1.示例代码

一、前言

在表单校验中，trigger 属性用于指定何时触发校验规则。常见的触发方式包括 "change" 和 "blur". 它们的区别如下：

1. trigger: "change":

   • 触发时机: 当表单控件的值发生变化时触发校验。
   • 应用场景: 适用于需要在用户每次输入时实时校验的情况，比如动态提示用户输入是否符合要求。
   • 例子:

     rules: {
       username: [
         { required: true, message: '用户名不能为空', trigger: 'change' }
       ]
     }
     

   • 优点: 提供即时反馈，用户体验更好。
   • 缺点: 如果表单控件很多，可能会导致性能下降。

2. trigger: "blur":

   • 触发时机: 当表单控件失去焦点时触发校验。
   • 应用场景: 适用于在用户完成输入后进行校验的情况，比如在用户输入完一个字段并移到下一个字段时进行校验。
   • 例子:

     rules: {
       email: [
         { type: 'email', message: '请输入有效的邮箱地址', trigger: 'blur' }
       ]
     }
     

   • 优点: 减少不必要的校验，提升性能。
   • 缺点: 用户只有在离开输入框后才能看到校验结果，反馈不如 change 即时。

1.示例代码

以下是一个包含两种触发方式的示例：

<template>
  <el-form :model="formData" :rules="rules" ref="form">
    <el-form-item label="用户名" prop="username">
      <el-input v-model="formData.username"></el-input>
    </el-form-item>
    <el-form-item label="邮箱" prop="email">
      <el-input v-model="formData.email"></el-input>
    </el-form-item>
    <el-button type="primary" @click="submitForm">提交</el-button>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        username: '',
        email: ''
      },
      rules: {
        username: [
          { required: true, message: '用户名不能为空', trigger: 'change' }
        ],
        email: [
          { type: 'email', message: '请输入有效的邮箱地址', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          console.log('表单提交成功');
        } else {
          console.log('表单校验失败');
          return false;
        }
      });
    }
  }
};
</script>

在这个示例中，username 字段使用 trigger: 'change' 进行校验，即每次输入变化时都会触发校验；email 字段使用 trigger: 'blur' 进行校验，即在输入框失去焦点时才触发校验。