Vue.js 是一款流行的前端框架，它的双向数据绑定和组件化开发使得页面开发效率和代码可维护性得到了很大提高。然而，在表单验证方面，Vue.js 并没有提供官方支持。本文将介绍如何使用 Vue.js 实现表单验证功能，包括常用的验证规则和自定义验证规则。
表单验证规则
表单验证是前端开发中重要的一部分，它可以保证用户输入的数据符合要求，提高系统的安全性和稳定性。常用的表单验证规则如下：
- 必填项验证：表单提交时某些输入框是必填项，不能为空。
- 邮箱验证：只允许输入符合邮箱格式的文本。
- 手机号码验证：只允许输入符合中国大陆手机号码格式的文本。
- 数字验证：只允许输入数字字符。
- 字符验证：只允许输入字符。
- 密码验证：只允许输入符合一定复杂度的密码，如包含数字、字母、特殊字符等。
- 相等验证：如确认密码输入框必须与密码输入框输入的文字相等。
- 自定义验证：为表单添加自定义验证规则。
使用 Vue.js 实现表单验证
Vue.js 提供了组件化开发的方式，我们可以将表单封装成组件，为组件添加验证规则，再通过组件间的数据绑定实现表单验证。下面是一个简单的使用 Vue.js 实现表单验证的示例代码：
-- -------------------- ---- -------
----------
-----
----- -------------------------------
-------
----
------ ----------- ----------------------- --
--------
---- ----------------------------------
------- -------------------------
-------
------
-----------
--------
------ ------- -
------ -
------ -
--------- ---
-------------- -----
--
--
-------- -
-------------- -
-- ---------------- -
------------------ - ------
- ---- -
------------------ - -----
-- ----
-
--
--
--
---------在这个示例中，我们定义了一个 username 变量和一个 usernameValid 变量，它们通过 v-model 双向绑定实现页面与组件间数据的同步。当 username 变量发生变化时，会触发验证函数 handleValidateUsername，该函数通过改变 usernameValid 变量的值实现验证结果的呈现。
必填项验证
我们可以定义一个 required 规则，通过 v-if 判断是否输入了文本内容。下面是一个示例代码：
-- -------------------- ---- -------
----------
-----
----- -------------------------------
-------
----
------ ----------- ----------------------- --
--------
---- --------------- -- ----------------------------
------- -------------------------
-------
------
-----------
--------
------ ------- -
------ -
------ -
--------- ---
-------------- -----
--
--
-------- -
-------------- -
-- ---------------- -
------------------ - ------
- ---- -
------------------ - -----
-- ----
-
--
--
--
---------在这个示例中，我们只需要在 handleSubmit 函数中添加必填项验证的逻辑即可。如果 username 变量为空，则将 usernameValid 设置为 false，并提示用户输入用户名。
邮箱验证
邮箱验证可以通过正则表达式匹配来实现。下面是一个示例代码：
-- -------------------- ---- -------
----------
-----
----- -------------------------------
-------
---
------ ------------ -------------------- --
--------
---- ----------------------------- -- -----------------------------
------- -------------------------
-------
------
-----------
--------
------ ------- -
------ -
------ -
------ ---
----------- -----------------------------------------------------
----------- -----
--
--
-------- -
-------------- -
-- ----------------------------------- -
--------------- - ------
- ---- -
--------------- - -----
-- ----
-
--
--
--
---------在这个示例中，我们定义了一个 emailRegex 变量，它通过正则表达式实现邮箱地址格式的匹配。在 handleSubmit 函数中，我们需要根据验证规则检查 email 变量的值，并将 emailValid 变量的值设为 true 或 false。
手机号码验证
和邮箱验证类似，手机号码验证也可以通过正则表达式匹配来实现。下面是一个示例代码：
-- -------------------- ---- -------
----------
-----
----- -------------------------------
-------
-----
------ ---------- --------------------- --
--------
---- ------------------------------- -- ------------------------------
------- -------------------------
-------
------
-----------
--------
------ ------- -
------ -
------ -
------- ---
------------ --------------------
------------ -----
--
--
-------- -
-------------- -
-- ------------------------------------- -
---------------- - ------
- ---- -
---------------- - -----
-- ----
-
--
--
--
---------数字验证和字符验证
数字验证和字符验证可以通过正则表达式匹配来实现。下面是示例代码：
-- -------------------- ---- -------
----------
-----
----- -------------------------------
-------
----
------ ----------- ------------------ --
--------
---- ------------------------- -- -----------------------
------- -------------------------
-------
------
-----------
--------
------ ------- -
------ -
------ -
---- ---
--------- --------------
--------- -----
--
--
-------- -
-------------- -
-- ------------------------------- -
------------- - ------
- ---- -
------------- - -----
-- ----
-
--
--
--
----------- -------------------- ---- -------
----------
-----
----- -------------------------------
-------
---
------ ------------- -------------------- --
--------
---- ---------------- -- -----------------------
------- -------------------------
-------
------
-----------
--------
------ ------- -
------ -
------ -
---- ----
--------- -----
--
--
-------- -
-------------- -
-- ----------------- -
------------- - ------
- ---- -
------------- - -----
-- ----
-
--
--
--
---------在数字验证中，我们可以通过 v-model.number 来将输入的文本转换为数值类型，并将 numValid 的值设为 false。
密码验证
密码验证需要定义一个复杂的正则表达式来匹配符合密码复杂度的文本。下面是一个示例代码：
-- -------------------- ---- -------
----------
-----
----- -------------------------------
-------
---
------ --------------- ----------------------- --
--------
---- ----------------------------------- -- ----------------------------------
------- -------------------------
-------
------
-----------
--------
------ ------- -
------ -
------ -
--------- ---
-------------- -----------------------------------------------
-------------- -----
--
--
-------- -
-------------- -
-- ----------------------------------------- -
------------------ - ------
- ---- -
------------------ - -----
-- ----
-
--
--
--
---------在这个示例中，我们定义了一个 passwordRegex 变量，它通过正则表达式匹配必须由数字和字母组成、长度大于等于6位的密码。在 handleSubmit 函数中，我们需要根据验证规则检查 password 变量的值，并将 passwordValid 变量的值设为 true 或 false。
相等验证
相等验证需要比较两个输入框的值是否相等。下面是一个示例代码：
-- -------------------- ---- -------
----------
-----
----- -------------------------------
-------
---
------ --------------- ----------------------- --
--------
-------
-----
------ --------------- ------------------------------ --
--------
---- -------------- --- --------------- -- --------------------------------------
------- -------------------------
-------
------
-----------
--------
------ ------- -
------ -
------ -
--------- ---
---------------- ---
--------------------- -----
--
--
-------- -
-------------- -
-- -------------- --- --------------------- -
------------------------- - ------
- ---- -
------------------------- - -----
-- ----
-
--
--
--
---------在这个示例中，我们定义了两个变量 password 和 confirmPassword，在 handleSubmit 函数中比较这两个变量的值是否相等，并将 confirmPasswordValid 的值设为 true 或 false。
自定义验证
自定义验证可以通过定义一个验证函数来实现，这个函数可以在组件中任意地方被调用，如在 created 钩子、事件处理函数或计算属性中等。下面是一个示例代码：
-- -------------------- ---- -------
----------
-----
----- -------------------------------
-------
---
--------- ----------------------------------
--------
---- ----------------------- --------------- --------
------- -------------------------
-------
------
-----------
--------
------ ------- -
------ -
------ -
-------- ---
------------- -----
---------------- ---
--
--
-------- -
-------------- -
-- -------------------- -
-------
-
-- ----
--
-------------- -
-- --------------- -
----------------- - ------
-------------------- - ---------
- ---- -- -------------------- - ---- -
----------------- - ------
-------------------- - ---------------
- ---- -
----------------- - -----
-------------------- - ---
-
--
--
--------- -
--------------------
--
------ -
-------- -
-------- ---------------
---------- ------
--
--
--
---------在这个示例中，我们定义了一个 checkContent 方法来实现自定义验证，该方法可以在组件中任意地方被调用。在 created 钩子中和 watch 监听事件中都调用了 checkContent 方法，以实现验证的即时更新。
总结
通过上述示例，我们可以看到 Vue.js 实现表单验证的细节和步骤。表单验证是一个必要的环节，它不仅可以保证系统的安全性和稳定性，而且可以提高用户体验和页面交互。同时，我们在实现表单验证功能的过程中，也可以学会如何使用正则表达式来匹配文本，了解到自定义验证和传参的方式，加深了对 Vue 组件化开发的理解和应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646eb9b9968c7c53b0d0d728