使用HTML模式和RegEx激活瀏覽器的彈出窗口

Question

再次需要您的幫助！ 我正在構建一個簡單的表單，您可以在代碼段中看到它。 我在IBAN字段中使用RegEx模式，因為在我的國家/地區它必須正好是22個字符。

我必須將此input類型設置為button類型，並將其與onclick和function 。 但是，如果不提交表格，

“請匹配要求的格式”

瀏覽器彈出窗口不起作用。 有人可以向我解釋為什么會這樣，我如何設法解決它？

PS我希望input為類型button

 <form action="" method="POST"> <span class="span-recepient-iban">IBAN<br/></span> <input type="text" pattern="[A-Z0-9]{22}" title="Must be exactly 22 characters (words and numbers only)" /> <input type="submit" value="Submit Form" /> </form> 

Answer 1

使用的自定義驗證： setCustomValidity

 function onSubmit(e) { var field = document.getElementById("field"); var constraint = new RegExp('^(CH-)?\\\\d{4}$', ""); if (constraint.test(field.value)) { field.setCustomValidity(""); } else { field.setCustomValidity("Your msg"); } } 

 <form> <input type="text" id="field"> <input type="submit" onclick="onSubmit(event)" value="Validate"> </form> 

@Bogdan Lozev希望這是您想要實現的目標

Answer 2

您錯過了輸入字段required=''屬性。

 <form action="" method="POST"> <span class="span-recepient-iban">IBAN<br/></span> <input type="text" pattern="[A-Z0-9]{22}" title="Must be exactky 22 characters (words and numbers only)" required='' /> <input type="submit" value="Submit Form" /> </form>