源码解析之探秘 iview 表单动态校验的背后故事
2023-09-19 16:00:39
需求场景和问题
声明：本文所讲的内容都是以 iview 中 form 表单的校验规则属性 rules，model 为前提的，并未用到单项 form-item 的校验规则属性。
大家在做前端开发的时候，可能会经常使用 iview 表单进行数据校验。而 iview 表单的动态校验功能，则可以帮助我们更轻松地处理校验逻辑，让表单校验变得更加灵活和高效。
那么，iview 表单的动态校验究竟是如何实现的呢？为了解开这个谜题，我们不妨从源码出发，一探究竟。
源码解析
1. 校验规则属性 rules
在 iview 表单中，校验规则属性 rules 是一个非常重要的属性。它允许我们在表单字段上定义一系列校验规则，当用户输入数据时，这些校验规则就会自动生效，并对输入的数据进行校验。
在源码中，rules 属性是一个数组，它可以包含多个校验规则对象。每个校验规则对象都包含了以下属性：
- type：校验规则的类型，如 required、pattern、min、max 等。
- message：校验规则的错误提示信息。
- trigger：校验规则的触发时机，如 blur、change、focus 等。
2. 动态校验
iview 表单的动态校验功能，主要体现在它的 rules 属性上。我们可以通过动态改变 rules 属性的值，来实现动态校验。
例如，我们可以在表单字段的 rules 属性中定义一个 required 校验规则，要求用户必须输入值。当用户输入值时，该校验规则就会生效，并对输入的数据进行校验。如果用户没有输入值，则会弹出错误提示信息。
如果我们想让这个校验规则只在用户失去焦点时才生效，我们可以将 trigger 属性的值设置为 blur。这样，当用户失去焦点时，该校验规则才会生效，并对输入的数据进行校验。
3. 校验过程
当用户在表单中输入数据时，iview 表单会自动对输入的数据进行校验。校验过程如下：
- iview 表单会遍历表单字段的 rules 属性，并依次执行每个校验规则。
- 如果某个校验规则不通过，则会弹出错误提示信息，并阻止表单提交。
- 如果所有校验规则都通过，则表单提交成功。
正确使用
为了正确使用 iview 表单的动态校验功能，我们需要遵循以下几点原则：
- 在表单字段的 rules 属性中，尽量使用多种校验规则，以确保数据的准确性。
- 将校验规则的触发时机设置为 blur，以防止用户在输入数据时收到不必要的错误提示信息。
- 在表单提交之前，对表单数据进行一次全面的校验，以确保所有数据都符合要求。
结语
通过对 iview 表单动态校验功能的源码解析，我们不仅了解了它的实现原理，还掌握了正确使用它的方法。希望这些内容能够对您的开发工作有所帮助。
