在前端开发过程中，表单验证是必不可少的一部分。通过表单验证可以保证用户输入的数据的正确性和有效性，提升网站的交互体验和安全性。JavaScript 是一种广泛使用的脚本语言，可以在网页上进行表单验证。本文将介绍常见的 JavaScript 表单验证技术，并提供详细的示例代码，帮助读者掌握这些技能。
必填项验证
一个表单中有些字段是必填的，如果用户没有填写这些字段，就应该提示用户进行填写。下面是一个实现必填项验证的 JavaScript 代码示例：
-- -------------------- ---- -------
-------- ---------------------- -
----- ------------ - ---------------------------------
----- ---------- - --------------------------
-- ----------- --- --- -
------------------------------ ------------
------ ------
- ---- -
-------------------------------
------ -----
-
-上述代码中的 checkRequired 函数接收一个参数 inputId，表示需要验证的输入框的 ID。首先获取指定 ID 的输入框元素，然后获取其值并去除两端空格。如果值为空字符串，则调用 showErrorMessage 函数显示错误信息，并返回 false；否则，调用 hideErrorMessage 函数隐藏错误信息，并返回 true。
格式验证
有些表单字段需要满足特定的格式要求，例如邮箱、手机号、密码等。下面是一个实现邮箱格式验证的 JavaScript 代码示例：
-- -------------------- ---- -------
-------- ------------------- -
----- ------------ - ---------------------------------
----- ---------- - --------------------------
----- ------------ - -----------------------------------
-- -------------------------------- -
------------------------------ ---------------
------ ------
- ---- -
-------------------------------
------ -----
-
-上述代码中的 checkEmail 函数接收一个参数 inputId，表示需要验证的输入框的 ID。首先获取指定 ID 的输入框元素，然后获取其值并去除两端空格。使用正则表达式 /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/ 验证邮箱格式是否正确。如果不正确，则调用 showErrorMessage 函数显示错误信息，并返回 false；否则，调用 hideErrorMessage 函数隐藏错误信息，并返回 true。
数字区间验证
有些表单字段需要输入数字，并且需要满足一定的区间要求。下面是一个实现数字区间验证的 JavaScript 代码示例：
-- -------------------- ---- -------
-------- ------------------------- ---- ---- -
----- ------------ - ---------------------------------
----- ----------- - --------------------------------------
-- ------------------- -- ----------- - --- -- ----------- - ---- -
------------------------------ ---- ------ - ------ ---------
------ ------
- ---- -
-------------------------------
------ -----
-
-上述代码中的 checkNumberRange 函数接收三个参数：inputId 表示需要验证的输入框的 ID，min 表示数字区间的下限值，max 表示数字区间的上限值。首先获取指定 ID 的输入框元素，然后获取其值并去除两端空格，并将其转换为数字类型。如果值不是数字或者不在区间范围内，则调用 showErrorMessage 函数显示错误信息，并返回 false；否则，调用 hideErrorMessage 函数隐藏错误信息，并返回 true。
单选框和复选框验证
有些表单字段是单选框或复选框，需要进行验证以确保用户选择了正确的选项。下面是一个实现单选框和复选框验证
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/3867