Question

基本上我有这个功能：

function testLength(){
    var input1 = document.getElementById("input1").value
    var input2 = document.getElementById("input2").value

    alert("test")
    if (input1.length < 2 && input2.lenght < 2){
        alert("Please enter more then one symbol");
        return false
    }
}

和输入：

<input type="text" name="input1" id="input1">
<input type="text" name="input2" id="input1">
<input type="submit" onclick="testLength();" value="press me">

这个想法是如果输入是1个字符长，不允许提交，但即使我的输入是1个字符长，它似乎没有进入if语句（我假设）应该停止提交按钮提交。知道为什么？

Answer 1

使用onsubmit事件：

<form onsubmit="return testLength();">
    <input type="text" name="input1">
    <input type="text" name="input2">
    <input type="submit" value="press me">
</form>

有关详情，请参阅：How to prevent form from being submitted?

Answer 2

您应该查看<form onsubmit="return testLength()">等内容。

如果函数返回false，则不会提交该函数。

Answer 3

假设您的输入和提交按钮位于<form>元素内，表单的默认行为（即实际提交）将会发生什么。您可能想要做的是为表单的submit事件添加一个事件监听器，并在那里进行验证。

<强> HTML

<form id="my-form">
    <input type="text" name="input1">
    <input type="text" name="input2">
    <input type="submit" value="press me">
</form>

<强>的Javascript

var form = document.getElementById('my-form');
form.onsubmit = function() {
    var input1 = document.getElementById("input1").value
    var input2 = document.getElementById("input2").value

    alert("test")
    if (input1.length < 2 && input2.lenght < 2){
        alert("Please enter more then one symbol");
        return false
    }
}

Answer 4

除了onsubmit之外，您还可以使用eventListener。

例如：

document.querySelector('').addEventListener('click', testLength);

<强> HTML

<form id="my-form">
    <input type="text" name="input1">
    <input type="text" name="input2">
    <input type="submit" id="submit" value="press me">
</form>

<强> JAVASCRIPT

    document.getElementById('submit').addEventListener('click', testLength);
    function testLength(){
    var input1 = document.getElementById("input1").value
    var input2 = document.getElementById("input2").value

    alert("test")
    if (input1.length < 2 && input2.lenght < 2){
        alert("Please enter more then one symbol");
        return false
    }
}

事件监听器不仅可以用于querySelector和getelementByID，而且可以使用您定义的任何目标，在文档中看到here。

使提交按钮执行一个功能

4 个答案: