Question

我正在使用一个非常简单（但满足我的需要的功能）的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>

但是它似乎不起作用。一些专家的建议将不胜感激。非常感谢。

Answer 1

正确的格式是

function setResourceId(context, next) {
    const randomIndex = Math.round(Math.random() * context.vars.resources.length);
    context.vars.resourceId = context.vars.resources[randomIndex].id;
}

您不想设置if (txt.value!='' && txt2.value!='' && txt3.value!='' && txt4.value!='')事件，但希望设置onkyeup。更普遍的事件是oninput。

您还应该检查onchange表单元素标签属性，该属性可以为您提供类似功能而无需使用javascript。 See here。

Answer 2

首先，只有在键盘更改了选择的情况下，您选择的监听keyup事件才起作用。如果用鼠标将其更改，则不会触发您的事件。最好听onchange

另一方面，您应该像txt4.value!=''一样检查所有文本字段的空度：

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

Answer 3

现在它可以工作了。

function manage(txt) {
    var bt = document.getElementById('send');
    if ( txt.value != '' && txt2.value != '' && txt3.value != '' && txt4.value != '' ) {
        bt.disabled = false;
    }
    else {
        bt.disabled = true;
    }
}

 <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)">
 <select name="Countries" id="txt4" onchange="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>

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

Answer 4

我之前已经做过这类功能。所以我在这里分享我的代码。 HTML代码

<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>

JavaScript代码：

<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>

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

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

4 个答案: