JS判断表单输入是否为空(示例代码)

2023年6月10日下午7:38 • JavaScript

JS判断表单输入是否为空是前端开发中常用的一种技巧，可以通过JS代码来判断用户是否填写了表单输入框，从而提高用户体验和数据输入的准确性。下面将详细讲解如何使用JS判断表单输入是否为空，以及一些示例代码和注意事项。

判断表单输入是否为空

JS判断表单输入是否为空的核心代码如下所示：

var input = document.getElementById("inputId");
if(input.value == ""){
    alert("请输入内容");
}

其中，document.getElementById("inputId")是获取HTML中对应id为inputId的input元素，input.value是获取input元素的文本内容。通过判断input.value是否为空来判断用户是否填写了表单输入框。

示例1：基本用法

下面是一个简单示例，演示如何使用JS判断表单输入是否为空：

<!DOCTYPE html>
<html>
<head>
    <title>判断表单输入是否为空示例</title>
</head>
<body>
    <form>
        <label>请输入内容：</label><input id="inputId" type="text" />
        <input type="button" value="提交" onclick="checkInput()" />
    </form>
    <script type="text/javascript">
        function checkInput(){
            var input = document.getElementById("inputId");
            if(input.value == ""){
                alert("请输入内容");
            }
        }
    </script>
</body>
</html>

上面的代码中，定义了一个输入框和一个提交按钮，点击提交按钮时会执行checkInput()函数，该函数会获取输入框的值并判断是否为空，如果为空则弹出提示框。

示例2：多个输入框判断

如果需要判断多个输入框是否为空，可以使用循环语句遍历所有输入框，示例如下：

<!DOCTYPE html>
<html>
<head>
    <title>判断表单输入是否为空示例2</title>
</head>
<body>
    <form>
        <label>请输入姓名：</label><input id="nameInputId" type="text" /><br />
        <label>请输入年龄：</label><input id="ageInputId" type="text" /><br />
        <input type="button" value="提交" onclick="checkInput()" />
    </form>
    <script type="text/javascript">
        function checkInput(){
            var inputs = document.getElementsByTagName("input");
            for(var i=0; i<inputs.length; i++){
                var input = inputs[i];
                if(input.value == ""){
                    alert("输入框不能为空");
                    return;
                }
            }
            alert("提交成功");
        }
    </script>
</body>
</html>

上面的代码中，定义了两个输入框和一个提交按钮，点击提交按钮时会执行checkInput()函数，该函数会使用document.getElementsByTagName("input")获取所有的输入框，通过循环语句判断每个输入框的值是否为空，如果为空则弹出提示框。