Vue2 Antd FormModel表单校验中的一些常见坑

1. 不统一的校验方式

最常见的坑就是校验方式不统一。比如，有的表单字段是必填的，有的不是；有的字段只能输入数字，有的可以输入字母；有的字段长度有限制，有的没有。这些不同的校验规则如果处理不好，就会导致用户在填写表单时无所适从。

解决这个问题的方法很简单，就是将所有的校验规则都统一起来。比如，所有的必填字段都用红色的星号标记出来；所有的数字字段都只能输入数字；所有长度有限制的字段都标注出长度限制。这样，用户在填写表单时一目了然，不会再被不同的校验规则搞得晕头转向。

2. 错误的校验提示

另一个常见的坑就是错误的校验提示。比如，用户在填写必填字段时忘记填写，此时提示信息应该是“该字段不能为空”。但是，如果提示信息是“该字段输入错误”，那么用户就会误以为自己填写的内容不正确，而不是忘记填写了。

解决这个问题的方法也很简单，就是确保所有的校验提示都是准确无误的。在编写校验提示时，要站在用户的角度考虑，想想用户在看到提示信息时会作何反应。如果提示信息容易引起歧义或误解，那么就需要重新修改。

3. 校验时机不当

校验时机不当也是一个常见的坑。比如，有的表单在用户填写完所有字段后才进行校验，有的表单在用户填写每个字段时就进行校验。这两种校验时机都有各自的优缺点。

在用户填写完所有字段后才进行校验的好处是，可以一次性发现所有的错误，然后用户可以一起修改。但是，这种校验方式的缺点是，如果表单字段很多，那么用户可能需要花费很长时间才能完成填写。

在用户填写每个字段时就进行校验的好处是，可以及时发现错误，然后用户可以立即修改。但是，这种校验方式的缺点是，如果表单字段很多，那么用户可能需要花费很长时间才能完成填写。

选择哪种校验时机，要根据具体情况而定。如果表单字段很多，那么可以选择在用户填写完所有字段后才进行校验。如果表单字段不多，那么可以选择在用户填写每个字段时就进行校验。

4. 无法禁用校验

有的表单在某些情况下是不需要进行校验的。比如，在用户查看表单时，就不需要进行校验。但是，有的表单即使在查看时也进行校验，这就给用户带来了很大的困扰。

解决这个问题的方法很简单，就是允许用户禁用校验。比如，可以在表单的顶部添加一个开关，用户可以点击这个开关来禁用校验。这样，用户在查看表单时就可以关闭校验，而不会受到干扰。

5. 无法自定义校验规则

有的表单校验库只提供了一些基本的校验规则，比如必填、数字、长度限制等。但是，有时候我们需要自定义一些校验规则。比如，我们需要校验用户输入的邮箱地址是否合法，或者我们需要校验用户输入的身份证号码是否正确。

解决这个问题的方法很简单，就是选择一个支持自定义校验规则的表单校验库。比如，Ant Design Vue就支持自定义校验规则。这样，我们就可以根据需要定义自己的校验规则，然后将其添加到表单中。

结论

表单校验是表单开发中最常见的一环。但是，如果表单校验处理地不好，就会带来糟糕的用户体验。本文介绍了Vue2 Antd FormModel表单校验中的一些常见坑，以及如何避免这些坑。希望本文能够对大家有所帮助。