Question

在页面中，为了获取字段值，我没有使用表单标记，而是使用Anchor标记的click事件来获取值并使用AJAX调用将其传递给服务器。

后来尝试了HTML 5模式验证，它没有成功;经过这么多尝试添加了表格标签，然后修改了＃34;锚点＃34;到＆＃34;按钮＆＃34;，然后就可以了。

旧

<div id="div1">
     <input type="text" id="message" pattern="[a-zA-Z]{3}" required title="Enter valid Station" />
      <a id="add" onclick="addMessage();">Add</a>
</div>

新

 <form id="addMessage">
     <div id="div1">
         <input type="text" id="message" pattern="[a-zA-Z]{3}" required title="Enter valid Station" />
          <button id="add">Add</button>
     </div>
 </form>

使用form代码和表单提交是触发模式验证的唯一方法，还是有任何变通方法？

Answer 1

HTML5Rocks上有一个不错的overview of constraint validation in HTML5。

您可以通过在JavaScript中调用DOM元素上的checkValidity()方法来手动验证字段：

＆＃13;

document.getElementById('add').addEventListener('click', function() {
  if (document.getElementById('message').checkValidity()) {
    window.alert('valid station name');
    // addMessage();
  } else {
    window.alert('invalid station name!');
  }
});

＆＃13;

<div id="div1">
  <label>
    Station
    <input type="text" id="message" pattern="[a-zA-Z]{3}" required title="Enter valid Station" maxlength="3">
  </label>
  <a id="add" role="button">Add</a>
</div>

＆＃13;

还可供参考：HTMLInputElement

HTML 5模式不适用于按钮的onclick事件

1 个答案: