在前端开发中，表单验证是必不可少的一环。传统的表单验证方式多为 if-else 或者 switch-case 语句，代码冗长、可读性差且难以维护。本文将介绍使用 ES6 增加的 Proxy 对象，实现简单、优雅并易于维护的表单验证方法。
什么是 Proxy
Proxy 对象是 ES6 中新增加的一个对象，可以用来拦截 JavaScript 操作。它可以拦截的操作包括对象属性的读取、赋值、删除、函数调用等等。在该对象的作用下，我们可以封装一些操作，达到控制、修改甚至是增强现有属性及方法的目的。
例如，我们可以通过 Proxy 对象拦截对某个对象属性的读写，防止属性值被任意修改，保证该属性值的安全。
表单验证的实现
在传统的表单验证方式中，我们需要手动对每个表单元素进行判断，增加了代码量，也降低了代码可读性。而使用 Proxy 对象，则可通过拦截整个表单对象的读写来实现表单验证。
步骤分析
我们可以按照以下步骤来使用 Proxy 实现表单验证：
- 创建一个空 Proxy 对象，绑定在表单元素 tagName 为 form 的元素本身上；
- 在 Proxy 对象的 set 方法中，监听表单元素的所有键值对变化，判断其值是否合法；
- 如果值不合法，则将错误信息存入 errors 对象中；
- 最后将 errors 对象输出。
示例代码
下面来看一个具体的示例。这里将创建一个代理对象 formProxy，监听表单元素的变化，并对表单元素进行验证。验证的规则是每个输入框的内容不能为空，并且用户名不能包含数字。
-- -------------------- ---- -------
----- ------ - ---
----- ---- - -------------------------------
----- --------- - --- ----------- -
----------- ---- ------ -
-- ---- --- ----------- -
----------- - ------
- ---- -
----- ----- - --------------------------------------
-- ------- -
-- ------ --- --- -
------------------ - ---------------------------
- ---- -- ----------- --- ---------- -- -------------------- -
------------------ - ------------
- ---- -
------ -------------------
-
-
----------- - ------
-
------ -----
-
---上面的代码中，我们通过 querySelector 方法来获取每个表单元素的名称，然后在 set 方法中监听这个名称对应的值的变化。如果该值为空（即没有输入），则在错误信息对象 errors 中存入该元素的错误信息。如果该值为用户名（即键名为 username），并且包含数字，则同样在错误信息对象中存入该元素的错误信息。
最后，我们可以在提交表单时，检查错误信息是否为空。如果不为空，则阻止表单提交，弹出对应的错误信息。代码如下：
-- -------------------- ---- -------
----- ------------ - --- -- -
-------------------
-- --------------------------- - -- -
--------------------------------
- ---- -
-----------------
-
--
------------------ - -------------完成上述代码后，我们可以看到表单元素的赋值操作都被代理拦截住了，只有当我们输入一个合法的值时，表单元素才会被赋值，并且错误信息不会产生。
总结
使用 ES6 提供的 Proxy 对象，我们可以实现优雅、简单的表单验证，避免了传统方式中的 if-else 或 switch-case 繁琐的判断。使用代理对象来实现表单验证，提高了代码的可读性和可维护性，是一种非常值得推广的前端开发方式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6484dd9148841e98943e2371