JavaScript

Question

我只想在两个函数 return 都为真时启用提交按钮。我只能使用 JavaScript。有人可以帮忙吗？

代码如下：

function func(obj) {
       if (obj.value.length > 4) {
           alert("Longer than 4.");
           return false;
       } else if (obj.value.length < 2) {
           alert("Shorter than 2.");
           return false;
       } else {
           return true;
       }
}

function func1(obj){
    if (obj.value == "abc"){
        return true;
    } else {
        alert("Isn't abc");
        return false;
    }

}

<form method="" action="">

    <input type="text" name="text" id="text" onblur="func(this)"><br>
    <input type="text" name="text" id="text" onblur="func1(this)"><br>
    <input type="submit" name="submit" value="Submit" disabled>

</form>

Answer 1

为方便起见，您可以为提交按钮指定一个 ID（我们称之为 "submitButton"）。

<input id="submitButton" type="submit" name="submit" value="Submit" disabled>

...

var submitBtn = document.getElementById("submitButton");

if(func(obj) && func1(obj)) {         
     submitBtn.disabled = false;
} else {
     submitBtn.disabled = true;
}

如果您由于某种原因不能给它一个 ID，您可以 select 使用 document.selectElementByTagName 所有输入元素，然后遍历它们以找到提交按钮。

Answer 2

一种可行的方法是设置按钮的属性而不是返回值。

添加两个变量，改变两个函数。
添加/更改输入的 ID。

        var test1 = false;
        var test2 = false;

        function func(obj) {
            if (obj.value.length > 4) {
                test1 = false;
            } else if (obj.value.length < 2) {
                test1 = false;
            } else {
                test1 = true;
            }
            if (test1 && test2) {
                document.getElementById('submit').disabled = false;
            } else {
                document.getElementById('submit').disabled = true;
            }
        }

        function func1(obj) {
            if (obj.value == "abc"){
                test2 = true;
            } else {
                test2 = false;
            }
            if (test1 && test2) {
                document.getElementById('submit').disabled = false;
            } else {
                document.getElementById('submit').disabled = true;
            }
        }

        <form method="" action="">
            <input type="text" name="text" id="text1" onblur="func(this)"><br>
            <input type="text" name="text" id="text2" onblur="func1(this)"><br>
            <input id="submit" type="submit" name="submit" value="Submit" disabled>
        </form>

这可能不是一个优雅的解决方案，但我测试了它并且有效。

Answer 3

我建议您对代码进行一些更改。

首先，您有两个具有相同 ID 的输入。你需要解决这个问题。
向表单添加一个方法，并更改提交按钮的名称和 ID，如下所示：

<form id="form" method="POST" action="">
    <input type="text" name="text" id="text1" onblur="check();"><br/>
    <input type="text" name="text" id="text2" onblur="check();"><br/>
    <input type="submit" name="submit_btn" id="submit_btn" disabled>
</form>

在 onblur 事件中，我们可以添加一个功能来检查您的情况：

function check() {
    var obj1 = document.getElementById('text1');
    var obj2 = document.getElementById('text2');
    if (func(obj1) && func1(obj2)) {
        document.getElementById('submit_btn').disabled = false;    
    } else {
        document.getElementById('submit_btn').disabled = true;    
    }        
}

并启用提交。

Answer 4

你的情况有很多解决方案，我建议在执行两个函数后调用 check() 方法，它会检查条件的有效性，然后禁用或激活提交按钮：

function check()
{
    var input_1 = document.getElementById('text-1').value;
    var input_2 = document.getElementById('text-2').value;
    
    if(input_1.length < 4 && input_1.length > 2 && input_2 == "abc")
        document.getElementById('submit').removeAttribute('disabled');
    else
        document.getElementById('submit').setAttribute('disabled','disabled');
}

function func(obj)
{
    if (obj.value.length > 4) 
        alert("Longer than 4.");
    else if(obj.value.length < 2)
        alert("Shorter than 2.");
    
    check();
}

function func1(obj)
{
    if (obj.value != "abc")
        alert("Isn't abc");
    
    check();
}

<form method="" action="">
    <input type="text" name="text" id="text-1" onblur="func(this)"><br>
    <input type="text" name="text" id="text-2" onblur="func1(this)"><br>
    <input id="submit" type="submit" name="submit" value="Submit" disabled>
</form>

希望对您有所帮助。

JavaScript - 从函数中获取 return 值

JavaScript - Getting return values from functions

html

forms

validation

submit