禁用提交按钮，直到它验证所有数字字段都有效

Question

我有一个包含三个数字字段的 html 页面。

 function checkLength_minlen(elem) { if (elem.value == ''){ document.getElementById("msg1").innerHTML = 'Min 6 and Max 256'; document.getElementById("msg1").style.color = 'black'; document.getElementById("submit").disabled = true; } else if (elem.value < 6) { document.getElementById("msg1").style.color = 'red'; document.getElementById("msg1").innerHTML="Min value is 6"; document.getElementById("submit").disabled = true; } else if (elem.value > 256) { document.getElementById("msg1").style.color = 'red'; document.getElementById("msg1").innerHTML="Max value is 256"; document.getElementById("submit").disabled = true; } else { document.getElementById("msg1").style.color = 'green'; document.getElementById("msg1").innerHTML="Min 6 and Max 256"; document.getElementById("submit").disabled = false; } } function checkLength_expiry(elem) { if (elem.value == ''){ document.getElementById("msg2").innerHTML = 'Min 2 and Max 1024'; document.getElementById("msg2").style.color = 'black'; document.getElementById("submit").disabled = true; } else if (elem.value < 2) { document.getElementById("msg2").style.color = 'red'; document.getElementById("msg2").innerHTML="Min value is 2"; document.getElementById("submit").disabled = true; } else if (elem.value > 1024) { document.getElementById("msg2").style.color = 'red'; document.getElementById("msg2").innerHTML="Max value is 1024"; document.getElementById("submit").disabled = true; } else { document.getElementById("msg2").style.color = 'green'; document.getElementById("msg2").innerHTML="Min 2 and Max 1024"; document.getElementById("submit").disabled = false; } } function checkLength_history(elem) { if (elem.value == ''){ document.getElementById("msg3").innerHTML = 'Min 1 and Max 32'; document.getElementById("msg3").style.color = 'black'; document.getElementById("submit").disabled = true; } else if (elem.value < 1) { document.getElementById("msg3").style.color = 'red'; document.getElementById("msg3").innerHTML="Min value is 1"; document.getElementById("submit").disabled = true; } else if (elem.value > 32) { document.getElementById("msg3").style.color = 'red'; document.getElementById("msg3").innerHTML="Max value is 32"; document.getElementById("submit").disabled = true; } else { document.getElementById("msg3").style.color = 'green'; document.getElementById("msg3").innerHTML="Min 1 and Max 32"; document.getElementById("submit").disabled = false; } }

 <div id="Minlen"> <label class="heading">Minimum Length</label> <input type="number" id="Minlen_text" min=6 max=256 onkeyup="checkLength_minlen(this)" value='8'> <span class="heading1" id="msg1"></span> </div> <div id="expiry"> <label class="heading">Expiry</label> <input type="number" id="Expiry_text" min=2 max=1024 onkeyup="checkLength_expiry(this)" value='100'> <span class="heading1" id="msg2"></span> </div> <div id="history"> <label class="heading">History</label> <input type="number" id="History_text" min=1 max=32 onkeyup="checkLength_history(this)" value='5'> <span class="heading1" id="msg3"></span> </div> <input type=submit class="commit" id="submit" value=Commit onclick="commit()">

现在我的问题是“提交”按钮在字段一（Minlen）中的错误输入被禁用，当我切换到第二个数字字段时，“提交”按钮被启用。 但如果任何字段的值超出范围，我希望提交按钮被禁用。

Answer 1

我使用三个布尔变量来控制这三个输入的验证。 这是实现目标的一种非常简单的方法。 尝试这个：

 var isValidMinLen=true; var isValidExpiry=true; var isValidHistory=true; function checkLength_minlen(elem) { if (elem.value == ''){ document.getElementById("msg1").innerHTML = 'Min 6 and Max 256'; document.getElementById("msg1").style.color = 'black'; document.getElementById("btn").disabled = true; isValidMinLen=false; } else if (elem.value < 6) { document.getElementById("msg1").style.color = 'red'; document.getElementById("msg1").innerHTML="Min value is 6"; document.getElementById("btn").disabled = true; isValidMinLen=false; } else if (elem.value > 256) { document.getElementById("msg1").style.color = 'red'; document.getElementById("msg1").innerHTML="Max value is 256"; document.getElementById("btn").disabled = true; isValidMinLen=false; } else { debugger document.getElementById("msg1").style.color = 'green'; document.getElementById("msg1").innerHTML="Min 6 and Max 256"; isValidMinLen=true; checkButtonValidation(); } } function checkLength_expiry(elem) { if (elem.value == ''){ document.getElementById("msg2").innerHTML = 'Min 2 and Max 1024'; document.getElementById("msg2").style.color = 'black'; document.getElementById("btn").disabled = true; isValidExpiry=false; } else if (elem.value < 2) { document.getElementById("msg2").style.color = 'red'; document.getElementById("msg2").innerHTML="Min value is 2"; document.getElementById("btn").disabled = true; isValidExpiry=false; } else if (elem.value > 1024) { document.getElementById("msg2").style.color = 'red'; document.getElementById("msg2").innerHTML="Max value is 1024"; document.getElementById("btn").disabled = true; isValidExpiry=false; } else { document.getElementById("msg2").style.color = 'green'; document.getElementById("msg2").innerHTML="Min 2 and Max 1024"; isValidExpiry=true; checkButtonValidation(); } } function checkLength_history(elem) { if (elem.value == ''){ document.getElementById("msg3").innerHTML = 'Min 1 and Max 32'; document.getElementById("msg3").style.color = 'black'; document.getElementById("btn").disabled = true; isValidHistory=false; } else if (elem.value < 1) { document.getElementById("msg3").style.color = 'red'; document.getElementById("msg3").innerHTML="Min value is 1"; document.getElementById("btn").disabled = true; isValidHistory=false; } else if (elem.value > 32) { document.getElementById("msg3").style.color = 'red'; document.getElementById("msg3").innerHTML="Max value is 32"; document.getElementById("btn").disabled = true; isValidHistory=false; } else { document.getElementById("msg3").style.color = 'green'; document.getElementById("msg3").innerHTML="Min 1 and Max 32"; isValidHistory=true; checkButtonValidation(); } } function checkButtonValidation(){ debugger if(isValidMinLen==false || isValidExpiry==false || isValidHistory==false){ document.getElementById("btn").disabled = true; }else{ document.getElementById("btn").disabled = false; } }

 <div id="Minlen"> <label class="heading">Minimum Length</label> <input type="number" id="Minlen_text" min=6 max=256 onkeyup="checkLength_minlen(this)" value='8'> <span class="heading1" id="msg1"></span> </div> <div id="expiry"> <label class="heading">Expiry</label> <input type="number" id="Expiry_text" min=2 max=1024 onkeyup="checkLength_expiry(this)" value='100'> <span class="heading1" id="msg2"></span> </div> <div id="history"> <label class="heading">History</label> <input type="number" id="History_text" min=1 max=32 onkeyup="checkLength_history(this)" value='5'> <span class="heading1" id="msg3"></span> </div> <input type=submit class="commit" id="btn" value=Commit onclick="commit()">