表格驗(yàn)證

HTML5添加了一些允許表單驗(yàn)證的屬性。例如，require 屬性可以添加到輸入字段，以使其強(qiáng)制填寫(xiě)。

更復(fù)雜的表單驗(yàn)證可以使用JavaScript來(lái)完成。

表單元素具有可以處理以執(zhí)行驗(yàn)證的 onsubmit 事件。

例如，我們創(chuàng)建一個(gè)帶有兩個(gè)輸入框和一個(gè)按鈕的窗體。兩個(gè)字段中的文本應(yīng)該相同，不能為空，才可通過(guò)驗(yàn)證。

<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>

現(xiàn)在我們需要定義 validate() 函數(shù)：

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("輸入兩個(gè)值不相等,請(qǐng)重新輸入!");
  return false;
}

只有當(dāng)值不為空且相等時(shí)才返回 true 。

提示: 如果其 onsubmit 事件返回 false，表單將不會(huì)被提交。