在不提交的情况下验证表单

Validate a form without submitting

本文关键字：验证 表单 情况下 提交      更新时间：2023-09-26

我有以下代码可以检查两个选择字段是否相同。当使用onsubmit调用时，代码工作正常。但是，在进行此验证后，仍会提交表单。如何防止脚本或表单提交不正确的数据。

请参阅下面的代码：

var fieldalias="Email address field"
function verify(element1, element2) {
    var passed=false
    if (element1.value=='') {
        alert("Please fill out the "+fieldalias+"!")
        element1.focus()
    }
    else if (element2.value=='') {
        alert("Please verify the "+fieldalias+"!")
        element2.focus()
    }
    else if (element1.value!=element2.value) {
        alert("The two "+fieldalias+"s do not match")
        element1.select()
    }
    else
        passed=true
    return passed
}

你没有包含你的HTML，所以我假设你已经将onsubmit（）添加到你的表单元素中。

如果是这样，请确保您的呼叫如下所示：

onsubmit="return verify(element1, element2)"

（相应地替换元素 1 和元素 2）

如果此假设不正确，请提供一些其他详细信息，以便我们更好地提供帮助。

尝试对事件调用 stopImmediatePropagation（），以防止表单元素或更高级别元素中的任何其他处理程序进一步处理提交事件。

使用不同的事件调用该代码，例如：onchange或onfocusout。这样，每次用户在您的字段中输入一些值时都会执行验证，尤其是在提交之前。

编辑：

我

不确定我是否正确理解了您，但我会以这种方式附加您的 JS 代码：

首先将选择框分配给变量：

var object_input = document.getElementById("selectId");

然后：

if(object_input.addEventListener)
{
    object_input.addEventListener('blur', focus_lost);  
    object_input.addEventListener('keypress', checkForEnter);
}
else
{
    object_input.attachEvent('onblur', focus_lost);  
    object_input.attachEvent('onkeypress', checkForEnter);
}

，然后执行验证 i focus_lost或检查输入。

假设在 html 代码中你有这样的东西：

<form action="test2.html" method="post" onsubmit="return verify(e1, e2);">
    <input type="text" name="e1" /><br/>
    <input type="text" name="e2" /><br/>
    <input type="submit" value="Validate" />
</form>

您必须输入提交事件：

return verify(e1, e2);

因此，如果数据无效，您将不会转到提交页面a

编辑：

我认为问题是 

element1.select()

在第三个 if 中，对于 select 对象不存在此选择方法。

您可以使用 

element1.focus()

将起作用的代码是：

var fieldalias="Email address field"
        function verify(element1, element2){
            var passed=false;
            if (element1.value==''){
                alert("Please fill out the "+fieldalias+"!");
                element1.focus();
            }
            else if (element2.value==''){
                alert("Please verify the "+fieldalias+"!");
                element2.focus();
            }
            else if (element1.value!=element2.value){
                alert("The two "+fieldalias+"s do not match");
                element1.focus();
            }
            else
                passed=true;
            return passed;
        }

和

<form action="test2.html" method="post" onsubmit="return verify(document.getElementById('e1'), document.getElementById('e2'));">
    <select id="e1">
      <option value="One">One</option>
      <option value="two">two</option>
      <option value="Three">Three</option>
      <option value="four">four</option>
    </select><br/>
    <select id="e2">
      <option value="One">One</option>
      <option value="two">two</option>
      <option value="Three">Three</option>
      <option value="four">four</option>
    </select><br/>
    <input type="submit" value="Validate" />
</form>
相关文章：