由于空字段，如何使用 javascript 防止表单提交？答案

【问题标题】：How do I use javascript to prevent form submission because of empty fields?由于空字段，如何使用 javascript 防止表单提交？
【发布时间】：2013-08-07 16:53:17
【问题描述】：

如何在 javascript 中编写脚本以输出错误并防止表单中包含空字段的表单提交？假设表单名称为“form”，输入名称为“name”。我一直遇到一些问题，PHP 并不总是能正确处理空字段，所以我想把它作为备份。任何帮助表示赞赏，谢谢。

【问题讨论】：

你不应该相信 javascript。您可以使用它来减少服务器的工作量，但您的 php 脚本必须知道如何验证数据。如果没有，您的脚本很容易受到攻击

标签： javascript forms

【解决方案1】：

HTML 代码：-

<form name='form'>
<input type="button" onclick="runMyFunction()" value="Submit form">
</form>

Javascript 代码：-

  function runMyFunction()
    {
        if (document.getElementsByName("name")[0].value == "")
        {
            alert("Please enter value");
        }
        else
        {
            var form= document.getElementsByName("form")[0];
            form.submit();        
        }
    }

【讨论】：

【解决方案2】：

克劳迪奥的回答很棒。这是一个简单的 js 选项。只是说如果字段为空则不执行任何操作 - 如果不是则提交。

如果需要验证多个，只需在 if 语句中添加 && 运算符，并为 OtherFieldName 添加相同的语法

function checkForm(form1)
{
    if (form1.elements['FieldName'].value == "")
    {
        alert("You didn't fill out FieldName - please do so before submitting");
        return false;
    }
    else
    {
        form1.submit();
        return false;
    }
}

【讨论】：

【解决方案3】：

这是未经测试的代码，但它演示了我的方法。

它将检查'form'中的任何文本字段是否有空值，如果有则取消提交操作。

当然，出于安全原因，您仍然需要检查 PHP 中的空字段，但这应该会减少使用空字段查询服务器的开销。

window.onload = function (event) {
    var form = document.getElementsByName('form')[0];
    form.addEventListener('submit', function (event) {
        var inputs = form.getElementsByTagName('input'), input, i;
        for (i = 0; i < inputs.length; i += 1) {
            input = inputs[i];
            if (input.type === 'text' && input.value.trim() === '') {
                event.preventDefault();
                alert('You have empty fields remaining.');
                return false;
            }
        }
    }, false);
};

【讨论】：

【解决方案4】：

将事件处理程序附加到提交事件，检查是否设置了值（DEMO）。

var form = document.getElementById('test');

if (!form.addEventListener) {
    form.attachEvent("onsubmit", checkForm); //IE8 and below
}
else {
    form.addEventListener("submit", checkForm, false);
}

function checkForm(e) { 
    if(form.elements['name'].value == "") {
        e.preventDefault();
        alert("Invalid name!");   
    }
}

【讨论】：