elementUI el-form 组件下 validation 提示不能为空，及验证不生效的原因剖析

2023-09-06 20:16:01

背景:
在项目开发中，前端框架一般都会用到 ElementUI，其表单组件的验证功能十分实用，但使用时也容易遇到一些问题，比如提示不能为空、验证不生效等，弄清楚其原因可以有效避免问题的发生。

提示不能为空:
当在表单元素上设置了 required 属性时，会显示 "不能为空" 的提示。需要注意的是，当输入框为空时，该提示才显示，如果输入框中存在值，即便不符合验证规则，也不会显示提示。

验证不生效:
当在表单元素上设置了 rules 属性，指定了验证规则，却发现验证不生效，原因可能如下：

缺少 v-model: 确保在需要验证的表单元素上使用了 v-model 绑定，这样才能将表单元素的值与 Vue 数据模型进行绑定。
验证函数不正确: 仔细检查验证函数的写法，确保其符合 ElementUI 的要求，如：
- 必须返回一个布尔值，true 表示验证通过，false 表示验证失败。
- 需要将提示信息作为参数传递给 message 函数，以显示验证失败时的提示信息。
异步验证不生效: 如果使用了异步验证，确保在验证函数中返回一个 Promise 对象，并在 Promise 对象中解析验证结果。
未正确使用 ref 属性: 当使用自定义组件时，需要使用 ref 属性来访问组件实例。在验证函数中，需要使用 this.$refs 对象来获取组件实例，然后调用其 validate 方法进行验证。

详细原因:

表单元素未获得焦点: 某些验证规则，如 required 和 pattern，需要表单元素获得焦点才能触发验证。确保在验证触发之前，表单元素已获得焦点。
使用延迟验证: ElementUI 提供了延迟验证功能，如果启用了此功能，验证会在表单元素失去焦点后才触发。如果需要立即验证，请禁用延迟验证。
自定义验证不正确: 如果使用了自定义验证，确保验证函数返回 true 或 false，并且正确显示验证失败时的提示信息。
表单元素禁用: 禁用的表单元素不会进行验证，确保在验证前已启用表单元素。
使用无效的 rules 属性: rules 属性必须是一个数组，数组中的每个元素都必须是一个对象，包含 required、validator 等属性。