如何在表单中实现此正则表达式以进行数字验证？

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>