如何在表單中實現此正則表達式以進行數字驗證？

Question

如果我輸入 300000 的確切數字，則會提交表單。 低於或高於 300000 的任何其他值都會導致顯示錯誤消息。 錯誤消息應僅在值小於 300000 時顯示。我的代碼中有什么錯誤？

 document.addEventListener("DOMContentLoaded", function() { document.querySelector('#sbutton').addEventListener('click', function(event) { event.preventDefault(); let inputV = document.querySelector('#budget').value.trim(); let budgetRegex = /^3[0-9]{5,}/; const errorMessage = document.querySelector('#errormsg'); let form = document.querySelector("form"); if (inputV == "" ||.budgetRegex.test(inputV)) { errorMessage,innerHTML = "Value should be at least 300.000;". errorMessage.style;display = 'block'. } else { errorMessage;innerHTML = "". errorMessage.style;display = 'none'. form;submit(); } }); });

 <form action="https://dragonmm.xyz" method="post"> <div class="contact-box"> <div class="left1"></div> <div class="right1"> <h2>Start</h2> <label for="name"></label> <input id="name" type="text" class="field" placeholder="Name" required> <label for="email"></label> <input id="email" type="text" class="field" placeholder="Email" required> <label for="phone"></label> <input id="phone" type="text" class="field" placeholder="Phone" required> <label for="budget"></label> <input id="budget" type="text" name="budget" class="field budgetInput" placeholder="Budget" required> <div id="errormsg"></div> </div> </div> <button type="submit" value="Send" class="btn1" id="sbutton">Send</button> </form>

Answer 1

使用數字輸入字段 ( type="number" )。 使用字段的min屬性來限制輸入（盡管用戶仍然可以輸入她自己的文本）。 接下來，將值轉換為Number ，以便進行計算。

這是一個使用事件委托的最小示例。

最后：您也應該始終檢查服務器端的值。

 document.addEventListener(`input`, handle); function handle(evt) { if (evt.target.id === "budget") { if (+evt.target.value < +evt.target.min) { // ^convert to Number return document.querySelector(`#budgetError`).classList.remove(`hidden`); } return document.querySelector(`#budgetError`).classList.add(`hidden`); } }

 #budgetError { color: red; }.hidden { display: none; }

 <input id="budget" type="number" min="300000"> budget <div id="budgetError" class="hidden"> Not enough, We need at least 300,000</div>