当开发一个前端应用程序时，表单是一个不可避免的组件。表单中的数据通常需要在提交前进行校验，以确保数据的准确性。Vue.js 是一个流行的前端框架，它提供了一种简单而有效的方式来处理表单校验并显示错误提示信息。在本文中，我们将讨论如何使用Vue.js来处理表单校验及错误提示。
表单校验
Vue.js中有一个名为Vuelidate的库，它提供了一个简单而强大的方式来定义表单校验规则。使用Vuelidate来定义表单校验规则非常容易，首先需要在项目中引入Vuelidate：
------ --------- ---- ----------- ------------------
然后在组件定义中声明表单的数据，并使用v-model指令将表单数据绑定到组件中：
----------
------
------ -------------- ------------------ --
------ --------------- ------------------- --
-----------------------
-------
-----------
--------
------ ------- -
------ -
------ -
----- ---
------ --
-
-
-
---------现在我们需要定义表单的校验规则，以确保正确输入数据。让我们添加一个名称和电子邮件字段，要求输入不为空，并且电子邮件地址格式必须正确。我们可以使用Vuelidate库提供的许多校验规则中的一种。在我们的示例中，我们将使用required和email规则：
------ - --------- ----- - ---- --------------------------
------ ------- -
------ -
------ -
----- ---
------ --
-
--
------------ -
----- -
--------
--
------ -
---------
-----
-
-
-在上面的代码中，我们使用validations属性来定义每个表单字段的校验规则。required规则要求字段的值不能为空。email规则要求字段的值必须符合电子邮件格式。现在，如果我们尝试提交表单，我们会发现一个问题，就是没有错误提示信息。
错误提示信息
现在我们已经定义了表单校验规则，但是我们需要一种方式来将错误提示信息显示给用户。Vue.js提供了几种不同的方式来显示错误提示信息。
使用$invalid属性
在组件定义中，Vue.js将每个表单字段的校验规则转换为一个对象，该对象提供对字段的验证状态进行访问的方法。可以使用$invalid属性来检查表单字段是有效的还是无效的。如果某个字段无效，我们可以显示相应的错误信息。让我们更新我们的示例组件，在表单的各个输入字段后面添加错误信息：
----------
------
------ -------------- ------------------ --
---- ---------------------------- -- --------------
------ --------------- ------------------- --
---- -------------------------
----- ---- -- - ----- ----- -------
------
-----------------------
-------
-----------
--------
------ - --------- ----- - ---- --------------------------
------ ------- -
------ -
------ -
----- ---
------ --
-
--
------------ -
----- -
--------
--
------ -
---------
-----
-
-
-
---------在上面的代码中，我们使用v-show指令来根据表单字段的验证状态显示错误消息。使用$v.name.$error来检查名称输入是否为空，使用$v.email.$error来检查电子邮件输入是否符合电子邮件格式。这种方法可以很好的展现校验结果，但是每次要验证一个表单字段的状态，就必须对每个表单字段都使用关联的$v对象，可能会使得模板代码显得混乱。
使用$v对象的访问器
Vue.js还允许我们使用访问器方法来访问$v对象中的每个表单字段。使用这种方法，我们只需要通过$v对象访问表单字段的校验状态就可以了。在下面的示例中，我们仅仅使用了一个错误信息的通用组件：
----------
------
------ -------------- ------------------ --
------- --------------------------- -- -----------------
------ --------------- ------------------- --
------- ------------------------
----- ---- -- - ----- ----- -------
---------
-----------------------
-------
-----------
--------
------ - --------- ----- - ---- --------------------------
------ ------- -
------ -
------ -
----- ---
------ --
-
--
------------ -
----- -
--------
--
------ -
---------
-----
-
-
-
---------在上面的代码中，我们将错误信息显示到ErrMsg组件中，该组件只接收一个show属性，当该属性为true时，会将文本内容渲染为传入的 slot 列表里的内容，否则不显示任何内容。通过这种方式，我们可以将重复的代码移到封装的组件，使得代码更加简洁。不过这种方式有一个缺陷，就是在通过 slot 传递错误信息时，我们需要额外的处理 slot 提示样式，可能增加 css 样式的编写成本。
使用Vuelidate
Vuelidate提供了一个全局组件ValidationProvider，它使我们能够在任何地方轻松地处理表单验证和错误提示。它需要一个名为rules的对象，该对象包含每个表单字段的校验规则。使用它可以更方便地进行错误提示。
----------
------
------------------- ---------------- --------- ------ ---
------ -------------- ------------------ --
---- ------------------------- --------- --------
---------------------
------------------- ---------------------- --------- ------ ---
------ --------------- ------------------- --
---- ------------------------- --------- --------
---------------------
-----------------------
-------
-----------
--------
------ ------- -
------ -
------ -
----- ---
------ --
-
-
-
---------在上面的代码中，我们使用ValidationProvider组件来包装每个输入框，在组件的rules属性中传递每个输入框的校验规则。ValidationProvider组件会根据校验规则对输入框的值进行校验，并根据校验结果决定是否显示错误信息。通过使用ValidationProvider组件，我们既可以方便地处理表单校验，又可以更加灵活地定制错误提示。
结论
在Vue.js中，使用Vuelidate库来处理表单校验非常容易，而且可以通过多种方式来显示错误提示信息。使用错误信息的封装组件可以使代码更加简洁，但是需要注意 CSS 样式的编写成本，使用Vuelidate的ValidationProvider组件可以让我们更加灵活地处理错误提示。适当的结合可以用更小的代码量，实现更高效的校验和错误提示功能。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6728b9252e7021665e217483