如何防止表单提交并告诉用户输入不能是三个数字

Question

我花了很多时间搜索 HTML 输入标签或 Javascript 以防止在输入只有 3 个数字时提交表单。我不想使用字符，因为我的输入字段只需要数字。

<input name="Code" value="000" onchange="leadingZeros(this)" onkeyup="leadingZeros(this)"
   onclick="leadingZeros(this)" autocomplete="off" id="myInput"   type='text' required=""   />

function leadingZeros(input) {
if(!isNaN(input.value) && input.value.length === 1) {
  input.value = '000' + input.value;
}

}

我在我的表单上使用上面的代码来强制在用户在输入字段中提供的数字之前输入三个零 (000)。

一些用户可能会忘记填写该字段并继续提交我的表单，并且表单将被提交，因为它检测到该字段不为空。

有些用户忘记填写该字段，我在提交表单时只得到三个零 (000)。

当他们忘记在前三个零之后输入数字并告诉用户INPUT CAN NOT BE 3 NUMBERS.

时，我想阻止表单提交

这将提醒他们前三个零已经在输入字段中，他们仍然必须在后面提供他们的数字。

请问我该怎么做？

Answer 1

您可以使用 form validation。例如，要强制输入三个零后跟一位或几位数字：

<input pattern="^000\d+$" required />

Answer 2

你可以这样写你的代码来达到目的。阅读评论以获得更多理解

HTML代码

  <form id="myForm">
    <input name="Code" value="000" autocomplete="off" id="myInput" type='text' required=""   />
    </form>

JavaScript代码

document.querySelector('#form').addEventListener("submit", function(e) {

//prevent default behaviour
e.preventDefault()

// collect input value
let inputValue = document.querySelector('#myInput').value

//check whether input value is not number or less than 3 char
 if(!isNaN(inputValue) || inputValue.length < 3){
 alert('Error. Input must be a number and more than 3 characters')

    }
//  submit the form data with with AJAX
    })

如果您不知道如何使用 AJAX 也不打算使用 AJAX，您可以将您的 HTML 写成这样，带有按钮/输入 type='button' 这样当用户按下按钮时表单不会自动提交

    <form id="myForm">
    <input name="Code" value="000" autocomplete="off" id="myInput" type='text' required=""   />
     <button type="button" id="myButton"> submit </button>
    </form>

然后你使用JavaScript当按钮像这样被点击时提交表单

document.querySelector('#myButton').addEventListener("click", function(e) {

    //prevent default behaviour
    e.preventDefault()

    // collect input value
    let inputValue = document.querySelector('#myInput').value

    //check whether input value is not number or less than 3 char
     if(!isNaN(inputValue) || inputValue.length < 3){
     alert('Error. Input must be a number and more than 3 characters')

        }

    //submit form
    document.querySelector('#form').submit()

        })

如何防止表单提交并告诉用户输入不能是三个数字

How To Prevent Form Submission And Tell Users That Input Cannot Be Three Numbers

html

javascript

forms

validation