我花了很多時間來搜索 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時，我想阻止表單提交。
這將提醒他們前三個零已經在輸入欄位中，并且他們仍然必須在其后提供他們的數字。
請問我該怎么做？
uj5u.com熱心網友回復：
您可以使用表單驗證。例如，要強制輸入三個零，后跟一個或多個數字：
<input pattern="^000\d $" required />
uj5u.com熱心網友回復：
您可以這樣撰寫代碼來達到目的。閱讀評論以獲得更多理解
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，您可以使用 button/ input type='button'這樣撰寫 HTML，這樣當用戶按下按鈕時表單不會自動提交
<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()
})
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/453539.html
標籤：javascript html 形式 验证