在 WEB 开发中，表单验证是不可避免的一部分。在 Vue.js 中，我们可以利用 JavaScript 对表单进行验证。本文将介绍如何在 Vue.js 中使用 JavaScript 验证表单，旨在帮助 WEB 前端开发人员提高开发效率和用户体验。
为什么要在 Vue.js 中使用 JavaScript 验证表单?
在传统的表单验证中，我们通常使用 HTML 的 form 元素提供的属性和事件来验证用户输入。这就意味着我们需要在页面渲染完成后，根据用户输入的数据去匹配验证规则，同时控制页面中各个元素的状态。这种实现方法虽然简单，但是有以下几个缺点：
- 验证规则与元素状态耦合在一起，使得代码混乱，不易维护；
- 当表单元素过多时，验证逻辑也变得非常繁琐，且容易出错；
- 很难实现复杂的验证需求，比如异步验证等。
而在 Vue.js 中，我们可以利用其数据双向绑定的特性，将表单数据与校验状态分离开来，从而实现高效的表单验证。
如何在 Vue.js 中使用 JavaScript 验证表单?
我们可以通过以下步骤来在 Vue.js 中使用 JavaScript 验证表单：
1. 定义表单数据
先定义一个包含表单元素数据以及对应的验证规则的对象。
-- -------------------- ---- -------
------ -
------ -
--------- -
--------- ---
--------- ---
--
---------- -
--------- -
---------- ----- -------- --------- -------- --------
----- -- ---- --- -------- ---- - - -- ----- -------- -------
--
--------- -
---------- ----- -------- -------- -------- --------
----- -- ---- --- -------- ---- - - -- ----- -------- -------
--
-
-
-formData 用于存放每个表单元素的值，formRules 用于存放每个表单元素的验证规则。
2. 定义验证方法
定义一个方法，用于实现表单验证的关键逻辑。
-- -------------------- ---- -------
-------- -
-------------- -
------ --- ----------------- ------- -- -
-------------------------------- -- -
-- ------- -
-------------
- ---- -
-------------
-
--
--
-
-这个方法中，我们调用 this.$refs.form.validate() 方法，该方法会遍历每个表单元素，依次调用表单元素的验证规则，如果表单值不符合规则，则验证不通过。
validate() 方法需要一个回调函数作为参数，如果表单验证通过，则回调函数的参数为 true；否则为 false。
validateForm() 方法使用 Promise 包装起来，因为验证逻辑是异步的，验证完后需要立即返回验证结果，以处理后续逻辑。
3. 打开表单验证
在表单元素中添加 :rules 属性，将对应的 formRules 对象传入即可。
-- -------------------- ---- -------
-------- ---------- ----------------- -------------------
------------- ----------- ----------------
--------- ---------------------------------------
---------------
------------- ---------- ----------------
--------- --------------------------- ---------------------------
---------------
--------------
---------- -------------- ----------------------------------
---------------
----------prop 属性用于绑定验证规则的字段名称，这里的 prop 值必须与 formRules 对象中的属性名一一对应。
4. 触发表单验证
定义一个方法，用于接受表单验证结果。
-- -------------------- ---- -------
-------- -
------------ -
--------------------------- -- -
----------------
----------- -- -
-----------------
--
-
-点击提交按钮时，调用 validateForm() 方法获取表单验证结果。如果验证通过，则执行后续逻辑；否则弹出提示信息。
一些列子
下面是一些基本的表单验证实例：
必填项验证
{
required: true,
message: '此项为必填项',
trigger: 'blur'
}长度验证
{
min: 6,
max: 16,
message: '长度在 6 到 16 个字符',
trigger: 'blur'
}格式验证
-- -------------------- ---- -------
-
---------- ------ ------ --------- -- -
-- -------------------------- -
------------ ---------------
- ---- -
----------
-
--
-------- ------
-上面的验证，正则表达式 /^yard\d*$/ 表示以 yard 开头，后面跟任意数字；如果不符合，则验证未通过。
结论
在 Vue.js 中使用 JavaScript 验证表单是一个高效并且用户体验友好的解决方案。它让表单验证与表单元素数据分离开来，减少代码的耦合性，提高代码的可维护性。同时，在实现复杂的表单验证需求时，也更灵活方便。希望本文能够为 Vue.js 开发人员提供一些指导，提高开发效率和用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6748f64393696b026808a188