在前端开发中，经常需要验证表单数据的有效性，其中一个常见的需求是检查表单元素是否为空。本文将介绍如何使用 JavaScript 和 jQuery 检查表单元素是否为空，并提供示例代码和指导意义。
检查单个表单元素
使用 JavaScript
可以使用 JavaScript 中的 value 属性来获取表单元素的值，并使用 trim() 方法去除前后空格，然后判断该值是否为空字符串：
const inputElement = document.getElementById('input-id');
const inputValue = inputElement.value.trim();
if (inputValue === '') {
// input is empty
} else {
// input is not empty
}使用 jQuery
使用 jQuery 可以更简洁地完成相同的操作：
const inputValue = $('#input-id').val().trim();
if (inputValue === '') {
// input is empty
} else {
// input is not empty
}检查多个表单元素
当需要同时检查多个表单元素时，可以将上述方法封装成函数，并依次检查每个元素，如果有任何一个为空，则返回 false，否则返回 true：
使用 JavaScript
-- -------------------- ---- -------
-------- ----------- -
----- ----------- - --------------------------------------------------
----- ----------- - --------------------------------------------------
----- ----------- - --------------------------------------------------
-- ------------ --- -- -- ----------- --- -- -- ----------- --- --- -
-- -- ----- --- ----- -- -----
------ ------
- ---- -
-- --- ------ --- --- -----
------ -----
-
-使用 jQuery
-- -------------------- ---- -------
-------- ----------- -
----- ----------- - -----------------------------
----- ----------- - -----------------------------
----- ----------- - -----------------------------
-- ------------ --- -- -- ----------- --- -- -- ----------- --- --- -
-- -- ----- --- ----- -- -----
------ ------
- ---- -
-- --- ------ --- --- -----
------ -----
-
-总结
在本文中，我们介绍了如何使用 JavaScript 和 jQuery 检查表单元素是否为空。对于单个元素，可以使用 value 属性和 trim() 方法来获取去除空格后的值并判断是否为空字符串；对于多个元素，可以将上述方法封装成函数，并依次检查每个元素。这些技巧可以帮助开发者更有效地验证表单数据的有效性。
示例代码：https://codepen.io/chatgpt/pen/ExNQmPB
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/26949