表格验证

表格验证

HTML5添加了一些允许表单验证的属性。例如，require 属性可以添加到输入字段，以使其强制填写。

更复杂的表单验证可以使用JavaScript来完成。

表单元素具有可以处理以执行验证的 onsubmit 事件。

例如，我们创建一个带有两个输入框和一个按钮的窗体。两个字段中的文本应该相同，不能为空，才可通过验证。

<form onsubmit="return validate()" method="post">
  Number: <input type="text" name="num1" id="num1" />
  <br />
  Repeat: <input type="text" name="num2" id="num2" />
  <br />
  <input type="submit" value="Submit" />
</form>

现在我们需要定义 validate() 函数：

function validate() {
  var n1 = document.getElementById("num1");
  var n2 = document.getElementById("num2");
  if(n1.value != "" && n2.value != "") {
    if(n1.value == n2.value) {
      return true;
    }
  }
  alert("输入两个值不相等,请重新输入!");
  return false;
}

只有当值不为空且相等时才返回 true 。

提示: 如果其 onsubmit 事件返回 false，表单将不会被提交。