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

一、前言

在表单校验中，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' 进行校验，即在输入框失去焦点时才触发校验。