表單required 必需驗證

admin發表於2019-03-28
UI

實際應用中，有些表單是必需的，也就是value值不能為空，否則將會給出提示。

HTML5之前，實現此驗證相對稍稍麻煩一些，極為簡單的需求也需要不少的JavaScript程式碼。

現在已經有了更為簡單的方式可以實現必需性驗證，只需要新增required。

首先看一段HTML5之前必需性驗證程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script>
function checkForm(form) {
  if(form.username.value == "") {
    alert("使用者名稱不能為空!");
    form.username.focus();
    return false;
  }
  if(form.password.value == "") {
    alert("密碼不能為空!");
    form.password.focus();
    return false;
  }
  return true;
}
window.onload = function () {
  let myForm = document.forms[0];
  myForm.onsubmit = function () {
    return checkForm(this);
  }
}
</script>
</head>
<body>
<form action="#" method="post">
  姓名：<input type="text" name="username"/><br/>
  密碼：<input type="password" name="password" /><br/>
  <input type="submit" value="提交表單"/>
</form>
</body>
</html>

上述程式碼中，如果文字框或者密碼框為空，點選提交按鈕則會彈出提示。

簡單實現了元素必需性驗證，所謂必需，就是元素的value屬性值不能為空，或者核取方塊單選按鈕必須被選中。

HTML5新增required屬性可以實現表單元素的必要性驗證，對如下型別元素有效：

（1）.input元素。

（2）.select元素。

（3）.textarea。

下面將上述程式碼進行簡單改造，程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
</head>
<body>
<form action="#" method="post">
  姓名：<input type="text" name="username" required/><br/>
  密碼：<input type="password" name="password" required/><br/>
  <input type="submit" value="提交表單"/>
</form>
</body>
</html>

上述程式碼將JavaScript程式碼完全刪除，為對應元素他新增required屬性即可。

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201903/28/202951qc9o0xcxzoppojiz.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

如果表單元素的value屬性值為空，點選提交按鈕，會彈出報錯提示框。

CSS也提供了:required偽類選擇器可以匹配具有required屬性的表單元素。

本文不再進行演示，具體可以參閱CSS :required 選擇器一章節。

是不是比原來要簡單很多，完全不需要一大堆的JavaScript程式碼，對於textarea多行文字框也是如此。

select下拉選單有一個注意點，所以下面單獨使用程式碼例項進行一下說明：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
</head>
<body>
<form action="#" method="post">
  <select name="one" required>
    <option value="請選擇">請選擇</option>
    <option value="1">螞蟻部落一</option>
    <option value="2">螞蟻部落二</option>
    <option value="3">螞蟻部落三</option>
  </select>
  <input type="submit" value="提交表單"/>
</form>
<form action="#" method="post">
  <select name="two" required>
    <option value="">請選擇</option>
    <option value="1">螞蟻部落一</option>
    <option value="2">螞蟻部落二</option>
    <option value="3">螞蟻部落三</option>
  </select>
  <input type="submit" value="提交表單"/>
  </form>
</body>
</html>

首先看預設狀態下表單截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201903/28/203024gjzlw4k596j46pwq.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼分析如下：

（1）.從表面看，兩個select下拉選單都具有值"請選擇"。

（2）.但是點選第一個提交按鈕不會彈出提示，點選第二個會彈出為空的提示。

（3）.這是因為我們所看到的"請選擇"並不是value屬性值，而是text文字。

（4）.第二個下拉選單的第一個option項處於預設選中狀態，但是它的value值為空，所以會彈出提示。

直接使用requied屬性確實非常的簡單，省卻了很多JavaScript程式碼，但是我們也應該看到它的缺點，那就是不夠靈活，提示語言和彈出框樣式都是固定的。如果HTML5新增的驗證功能如此呆板，那就太雞肋了，幸運的是，HTML5同樣提供了可以定製驗證提示資訊的方式。

考慮到文章的篇幅問題，本文不做介紹，關於HTML5定製驗證資訊可以參閱如下幾篇文章：

（1）.validity 屬性一章節。

（2）.HTML5自定義驗證資訊一章節。

相關文章