Javascript验证输入字段+选择字段

我正在使用一个非常简单但功能强大的Javascript脚本来验证输入字段

这里是我的主要代码：

<script language = "javascript">
function manage(txt) {
    var bt = document.getElementById('send');
    if (txt.value && txt2.value && txt3.value != '') {
        bt.disabled = false;
    }
    else {
        bt.disabled = true;
    }
}       
</script>

这是我的田地

    <input type="text" name="FNAME" id="txt" class="input" size="20" placeholder="First Name *" onkeyup="manage(this)">
    <input type="text" name="LNAME" id="txt2" class="input" size="20" placeholder="Last Name *" onkeyup="manage(this)">
    <input type="text" name="EMAIL" id="txt3" class="input" size="20" placeholder="Email *" onkeyup="manage(this)">

这里是我的提交按钮：

    <input type="submit" name="submit" id="send" class="button button-primary" value="Subscribe" disabled>

这样做的目的是使“提交”按钮保持禁用状态，直到所有字段都输入了某个值并且工作完全正常，但是我还有一个新的和附加的选择选项：

    <select name="Countries">
            <option value="">Select Country</option>
            <option value="Afghanistan">Afghanistan</option>
            <option value="Åland Islands">Åland Islands</option>
            <option value="Albania">Albania</option>
            ......
    </select>

我已尝试应用以下更改：

<script language = "javascript">
function manage(txt) {
    var bt = document.getElementById('send');
    if (txt.value && txt2.value && txt3.value && txt4.value != '') {
        bt.disabled = false;
    }
    else {
        bt.disabled = true;
    }
}       
</script>

    <select name="Countries" id="txt4" onkeyup="manage(this)">
            <option value="">Select Country</option>
            <option value="Afghanistan">Afghanistan</option>
            <option value="Åland Islands">Åland Islands</option>
            <option value="Albania">Albania</option>
            ......
    </select>

然而，它似乎不起作用。如有专家建议，将不胜感激。非常感谢。

正确的形式是

if (txt.value!='' && txt2.value!='' && txt3.value!='' && txt4.value!='')

您不想设置onkyeup事件，但要设置onchange。更普遍的事件是

您还应该检查required form elements标记属性，它可以在不使用javascript的情况下为您提供类似的功能

首先，只有在键盘更改了select的情况下，select上的监听键启动事件才会起作用。如果它被鼠标更改，您的事件将不会被触发。最好一改就听

另一方面，您应该检查所有文本字段的空白，就像您对txt4.value！=：

现在它可以工作了

函数managetxt{ var bt=document.getElementById'send'； 如果txt.value！=&txt2.value！=&txt3.value！=&txt4.value！={ bt.disabled=false； } 否则{ bt.disabled=true； } } 选择国家 阿富汗 奥兰群岛 阿尔巴尼亚

---

我以前做过这种类型的功能。所以我在这里分享我的代码。 HTML代码

Javascript代码：

---

有很多方法可以解决这种类型的功能，但是对于这种情况，我使用了上面的代码来实现这个目标。如果您有任何疑问，请告诉我。谢谢。

仅供将来使用：尽量避免！=并使用！==相反，它会阻止你做一些奇怪的事情。这很有效，非常感谢，特别是onchange部分。

if (txt.value!='' && txt2.value!='' && txt3.value!='' && txt4.value!='') {
   ...
}

<form method="Post" class="form">
    <input type="text" name="FNAME" id="txt" class="input" size="20" placeholder="First Name *" onblur="manage(this)">
    <input type="text" name="LNAME" id="txt2" class="input" size="20" placeholder="Last Name *" onblur="manage(this)">
    <input type="text" name="EMAIL" id="txt3" class="input" size="20" placeholder="Email *" onblur="manage(this)">
    <select name="Countries" id="txt4"  onchange="manage(this)" class="input">
            <option value="">Select Country</option>
            <option value="Afghanistan">Afghanistan</option>
            <option value="Åland Islands">Åland Islands</option>
            <option value="Albania">Albania</option>
    </select>
    <input type="submit" name="submit" id="send" class="button button-primary" value="Subscribe" disabled>
</form>

<script>
function manage($e){
    var input = document.getElementsByClassName("input");  
    var status=false;
    for(var i=0;i<input.length;i++){
        if(input[i].value.trim()!='' && input[i].value.trim()!=null && input[i].value.trim()!=undefined){
            status = true;
        } else {
            status = false;
            break;
        }
    }
    console.log(status);
    if(status===true){
        var email = document.getElementById("txt3").value;  
        if(!(/^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(email.trim()))){console.log('1');
            document.getElementById('send').disabled = true;
        } else {console.log('2');
            document.getElementById('send').disabled = false;
        }       
    } else {
        document.getElementById('send').disabled = true;
    }
}

</script>