直击表单验证痛点，详解Element UI中的trigger:'blur'和trigger:'change'

Element UI 中 trigger:'blur' 和 trigger:'change' 的区别

触发时机不同

trigger:'blur' ：当元素失去焦点时触发校验。这意味着，在输入框中输入内容时，失去焦点后才会触发校验。

trigger:'change' ：当元素值发生改变时触发校验。这意味着，在输入框中输入内容时，每次输入字符都会触发校验。

适用场景不同

trigger:'blur' ：适用于需要在用户离开输入框时才进行校验的场景，例如密码输入框。这样可以防止用户在输入密码时不小心触发校验，导致密码泄露。

trigger:'change' ：适用于需要在用户输入内容时立即进行校验的场景，例如用户名输入框。这样可以帮助用户及时发现输入错误，并做出相应的修改。

代码示例

<el-form :model="form">
  <el-form-item prop="username" label="用户名">
    <el-input v-model="form.username" trigger="change"></el-input>
  </el-form-item>
  <el-form-item prop="password" label="密码">
    <el-input v-model="form.password" trigger="blur"></el-input>
  </el-form-item>
</el-form>

在上述代码中，用户名输入框的校验会在输入内容时立即触发，而密码输入框的校验会在离开输入框后触发。

总结

• trigger:'blur'和trigger:'change'的区别在于触发校验的时机。
• trigger:'blur'适用于需要在用户离开输入框时才进行校验的场景，而trigger:'change'适用于需要在用户输入内容时立即进行校验的场景。
• 根据具体场景选择合适的trigger属性，可以实现最佳的表单校验效果。

常见问题解答

1. trigger:'blur' 和 trigger:'change' 哪个更好？
   没有更好的选择，具体取决于校验场景。如果需要立即发现输入错误，则使用 trigger:'change'；如果需要在用户离开输入框时才进行校验，则使用 trigger:'blur'。

2. 可以在一个输入框中同时使用 trigger:'blur' 和 trigger:'change' 吗？
   可以，但通常不建议这样做。因为这样会导致校验规则过于复杂，也不符合大多数校验场景。

3. 如何禁用输入框的校验？
   可以使用 :rules="[]" 属性禁用输入框的校验。

4. 如何自定义校验规则？
   可以使用 :rules="[]" 属性自定义校验规则，例如：

   rules: [
     { required: true, message: '该字段不能为空', trigger: 'blur' },
     { minlength: 6, message: '最小长度为 6', trigger: 'change' },
   ]
   

5. 如何获取校验结果？
   可以使用 validate() 方法获取校验结果，例如：

   this.$refs.form.validate((valid) => {
     if (valid) {
       // 校验通过
     } else {
       // 校验不通过
     }
   });