Question

再次需要您的帮助！我正在构建一个简单的表单，您可以在代码段中看到它。我在IBAN字段中使用RegEx模式，因为在我的国家/地区它必须正好是22个字符。

我必须将此input类型设为button类型，并将其与onclick和function一起使用。但不提交表格，

“请匹配请求的格式”

浏览器弹出窗口不起作用。有人可以向我解释为什么会这样，我该如何解决？

P.S。我希望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>

使用HTML模式和RegEx激活浏览器的弹出窗口

2 个答案: