Question

我最近接触了HTML5表单验证的新主题（对我来说）。我成功地测试了它，但我仍然对如何以及为何使用它感到困惑。让我试着用一个简单的例子来解释。

我的表单有10个字段（文字，数字，日期......）;每个人都拥有required和pattern visual验证效果很好;每个字段都显示Go / NoGo状态：这很好。
但是，当使用javascript提交表单时，我是否应该重新验证每个字段？换句话说，HTML5验证只是一个视觉工件;它不会阻止表单提交。如果用户想要输入错误的内容而忽略红旗，他就可以这样做。

如果我对此是正确的，为什么我应该使用HTML来做我可以（我必须）使用JS做的事情？也许JS有办法知道一切都没问题，无需再进一步检查。

Answer 1

换句话说，HTML5验证只是一个视觉工件;它不会阻止表单提交。

它不应该如何运作。根据设计，HTML5验证应该防止提交错误填写的表单。它确实 - in most browsers。不幸的是，a bug in Safari会导致您描述的行为。因此，如果修复了这个错误，是的，您可能还需要使用JS验证表单，但这不是因为HTML5验证的性质，只是因为它缺乏对Safari的支持。

Answer 2

当您通过HTML将HTML验证应用于表单元素并且该元素的值不符合验证条件时，表单将不会被提交。

但是，如果涉及JavaScript，则必须控制此过程。最简单的方法是简单地检查表单的有效性。

＆＃34;但是，在使用JavaScript提交表单时，我是否应该重新验证每个字段？＆＃34;

正如您在我的代码段中看到的那样，您必须验证表单，这可以通过一个简单的方法调用来完成。如果需要，您可以检查每个元素以查看哪些元素无效以及原因并采取相应措施。

＆＃34;换句话说，HTML5验证只是一个视觉工件;它不会阻止表单提交。如果用户想要输入错误的内容而忽略红旗，他就可以这样做。＆＃34;

当您坚持使用HTML而不使用JavaScript时，验证不仅仅是可视化的。表格将不会提交。该功能已融入HTML5 Form兼容的浏览器中。

＆＃34;如果我对此是正确的，为什么我应该使用HTML来做我能做（而且我必须）用JS做的事情？也许JS有办法知道一切正常，无需进行任何进一步的检查。＆＃34;

同样，仅使用HTML标记将为您提供各种验证器（必需，模式，数字等），它们将开箱即用。但是，您无法控制验证消息的内容或确切地显示它们的显示位置（甚至它们的外观）。这完全取决于浏览器。这就是HTML5 Forms规范包含一个非常强大的API（通过JavaScript）对应的原因 - 您可以完全控制验证和通知过程。

＆＃13;

var btn = document.getElementById("btnSubmit");
var frm = document.getElementById("frmTest");


btn.addEventListener("click", function(){
  // The HTML 5 Forms API provides a .checkValidity()
  // method to your form object so that you can know
  // if the form is valid or not:
  if(frm.checkValidity()){
    frmTest.submit();
  }
});

＆＃13;

<form method=post action="http://www.somewhere.com" id=frmTest>
  
  <input required>
  <input type=button id=btnSubmit value=submit>
  
</form>

＆＃13;

这是一个基本的JavaScript函数，演示了使用HTML5 Forms API可以完成的任务：

  // Custom form validation logic:
  function validate(evt) {

    // An HTML5 form has a checkValidity() method which forces it
    // to examine the validity of all controls that know how to validate
    // and it returns a boolean indicating if ALL these controls are valid
    // or if any ONE of them is not.
    var valid = theForm.checkValidity();
    if (valid) {
      // Everything is good. Submit the form:
      theForm.submit();
    } else {
      // At least one form element is invalid. Loop through all the elements to
      // see which one(s) they are:
      var theElements = theForm.elements;

      for (var i = 0; i < theElements.length; i++) {
        var theElement = theElements[i];

        // If the form element participates in the HTML5 Validity Framework and
        // if it is invalid...
        if (theElement.willValidate && !theElement.validity.valid) {

          console.warn(theElement.id + " validity details: ");

          // ...The object will have a validity object property:
          console.log(theElement.validity);

          // The element is invalid. Loop through all the validity object's
          // properties to see why it is invalid:
          for (var constraint in theElement.validity) {

            // Check the particular validity constraint for true
            if (theElement.validity[constraint]) {
              // Update the span element next to the offending form element with the reason:
              theElement.nextElementSibling.innerHTML = constraint;
            }  // End If

          }  // End For

        }  // End If

      } // End For

    } // End If

  }  // End Function

Answer 3

当HTML5验证未通过时，浏览器不应让用户提交表单。 HTML5提供了良好的验证，但是如果您想要更复杂的验证，或者如果您想要在不支持HTML5验证的浏览器上定位，那么请使用js。

Answer 4

<form method="GET" action="Your Action Page" id="contact form">
<div class="form-group">
<label>Name</label>
<input type="text" name="name" placeholder="name" id="name" class="form-control" required="true" pattern="[a-zA-z]+">
</div>

<div class="form-group">
<label>Email</label>
<input type="email" name="email" id="email" placeholder="email" class="form-control" required="true" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">
</div>

<div class="form-group">
<label>Mobile No:</label>
<input type="tel" name="number" id="number" placeholder="Phone No"pattern="^\d{10}$" required="true" oninput="this.value = this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\..*)\./g, '$1');" onkeydown="if(this.value.length==10 &amp;&amp; event.keyCode!=8 &amp;&amp; event.charCode != 9 &amp;&amp; event.which != 9 ) return false">
</div>

<div class="submit-area">
<input type="submit" id="submit-contact" name="submit" class="btn-alt" value="Send Message">
<div id="msg" class="message"></div>
</div>
</form>

Answer 5

您可以阻止提交时的默认行为（包括html5的表单验证），并通过js开始此验证来处理数据。

Answer 6

以下是一个示例，您可以使用HTML5表单验证验证要求输入名称的输入字段：

<input id="name" name="name" value="" aria-describedby="name-format" required aria-required=”true” pattern="[A-Za-z-0-9]+\s[A-Za-z-'0-9]+" title="firstname lastname">

您希望“姓名”字段以“名字姓氏”格式提交，并且只包含字母和空格。您可以通过在“名称”字段中添加模式属性来实现此目的，将其值设置为我们希望与之进行比较的正则表达式。

使用pattern属性时，隐含正则表达式的开头和结尾的^和$，不需要包括。

您可以通过添加一个标题属性来帮助用户，该属性告诉他们您需要的格式。

要确保您的用户在电子邮件，网站和故障单数字段中输入正确的数据，您可以使用HTML5中添加的一些新输入类型：

<input type="email" id="email" name="email" required>
…
<input type="url" id="url" name="url">
…
<input type="number" id="numTickets" name="numTickets" required>

通过指定适当的类型，您的浏览器将为您验证数据，并确保您在电子邮件字段中有一个电子邮件地址，网站字段中有一个URL，以及票数字段中的数字。< / p>

没有Javascript验证的HTML5表单验证

6 个答案: