Question

我正在尝试创建一个需要填充9位数字的表单。我希望禁用提交按钮，直到表格完全填充9位数。我发现许多脚本已禁用按钮，直到填充但没有特定的长度。你能帮我吗？

<form name="form1">
    <input type="text" name='text1' maxlength="9" class="phone-input">
    <input type="button" value="submit" onclick="phonenumber(document.form1.text1); changeDiv();"/>                     
    </form>

谢谢！

Answer 1

您可以尝试使用模式。没试过，但必须是这样的：

<input pattern=".{9}">

Answer 2

根据Markus的建议，除了pattern之外，您还可以使用\d属性来验证输入（指定required仅允许数字）。然后，可以使用文本字段的validity.valid属性来启用/禁用input事件处理程序中的按钮：

<form name="form1">
    <input id="txtPhone" type="text" name='text1' pattern="\d{9}" required maxlength="9" class="phone-input" >
    <input id="btnSubmit" type="button" value="submit" disabled="disabled" />
</form> 
<script>
    document.getElementById("txtPhone").addEventListener("input", function () {
        document.getElementById("btnSubmit").disabled = !this.validity.valid;
    });
</script>

＆＃13;

document.getElementById("txtPhone").addEventListener("input", function () {
    document.getElementById("btnSubmit").disabled = !this.validity.valid;
});

＆＃13;

<form name="form1">
    <input id="txtPhone" type="text" name='text1' pattern="\d{9}" required maxlength="9" class="phone-input" >
    <input id="btnSubmit" type="button" value="submit" onclick="alert('Submit!');" disabled="disabled" />
</form>

＆＃13;

禁用按钮，直到填写特定长度的表单

2 个答案: