### el-form 表单中 `rules` 的 `trigger` 属性作用与用法 #### 1. `trigger` 属性的作用 `trigger` 是用于定义触发校验的时机或事件的一个属性。它决定了当用户执行某些操作时，表单项是否会立即被验证。具体来说，`trigger` 可以是一个字符串或数组，表示一种或多种触发方式。 对于不同的表单项类型（如输入框、下拉菜单等），可以指定适合其交互逻辑的触发机制。例如，在文本输入框中通常会使用 `'blur'` 或 `'change'` 来触发验证[^1]。 #### 2. 常见的 `trigger` 类型及其行为 以下是常见的几种 `trigger` 配置选项： - **`blur`**: 当用户离开当前焦点所在的控件时触发验证。这通常是针对 `<input>` 和类似的可编辑字段设计的行为。 - **`change`**: 用户修改数据并失去焦点后触发验证。此模式更适合于一些复杂的选择器组件（比如日期选择器）或其他非即时反馈场景下的情况。 - **自定义方法调用**: 如果需要更灵活控制何时进行验证，则可以通过编程手段手动触发表单项验证函数。 下面给出一段示例代码展示如何配置这些参数: ```javascript const rules = { username: [ { required: true, message: '请输入用户名', trigger: ['blur', 'change'] } ], email: [ { type: 'email', message: '请输入有效的邮箱地址', trigger: 'blur' }, { required: true, message: '邮箱不能为空', trigger: 'change' } ] }; ``` 在此例子中，“username”的规则会在用户点击别的地方(`blur`)以及改变内容(`change`)的时候都做检验；而“email”，除了要求必填外还额外增加了邮件格式正确性的检查，并分别指定了不同情况下应用何种类型的触发器来启动相应的验证过程[^2]。 #### 3. 动态调整 `trigger` 有时可能希望基于外部状态的变化实时更新某个字段上的验证条件连同它的触发策略一起变动。此时就可以利用 Vue.js 提供的数据响应特性配合计算属性或者监听器实现动态设定功能。 例如，假设我们有一个登录界面包含了两个密码输入域——一个是原始密码另一个是用来确认的新密码。那么我们可以这样编写我们的验证逻辑以便更好地处理两者间的一致性问题： ```javascript computed:{ passwordRules(){ return this.isConfirm ?[ ...this.basePasswordRules, {validator:this.checkPasswordsMatch,trigger:'blur'} ] : this.basePasswordRules; } } methods:{ checkPasswordsMatch(rule,value,callback){ if(value !== this.new_password){ callback(new Error('新旧密码不匹配')); }else{ callback(); } } } data() { return { isConfirm:false, basePasswordRules:[ {required:true,message:"请输入密码",trigger:['blur','change']}, {min:8,max:16,message:"长度应介于8至16位之间",trigger:'blur'} ] }; } ``` 这里展示了通过计算属性passwordRules根据isConfirm标志的状态决定是否增加额外关于两处密码相等性的检测规则，并且明确了这个新增加部分仅在模糊事件发生时才生效的情况说明[^2]。 ### 注意事项 虽然能够自由组合各种形式的triggers提高用户体验的同时也需要注意过度频繁地激活可能导致性能下降甚至引起不必要的干扰现象出现所以实际开发过程中应当谨慎权衡利弊做出合理取舍。