Day17 Javascript表單驗證

2022 iThome 鐵人賽

DAY 17

Modern Web

Javascripts惡補小教室系列第 17 篇

14th鐵人賽

karta1366796

團隊imac_柬埔寨7日遊

2022-10-02 13:20:58

3019 瀏覽

分享至

DOM驗證

在網頁中填寫表單資訊時，我們時常會需要輸入不同的資料，像是手機、電子郵件、出生年月日，等等的資料，但是當輸入的資料不是我們要的格式，就會造成回傳後端的錯誤，利用DOM實施表單驗證，就可以避免我們再提交時，有必填的欄位需要填，但是卻沒有填的狀況，或是只能輸入數字，卻打出中英文字串，此外在HTML與CSS裡面，有許多的屬性讓我們去使用，使得驗證變得更將方便!

<html>
<head>
<script>
function validateForm() {
  let x = document.forms["objForm"]["personname"].value;
  if (x == "") {
    alert("不能輸入空的名子");
    return false;
  }
}
</script>
</head>
<body>

<h1>JavaScript 驗證</h1>

<form name="objForm" action="/demo/html/action_page.php" onsubmit="return validateForm()" method="post">
  Name: <input type="text" name="personname">
  <input type="submit" value="Submit">
</form>

</body>
</html>

我們一開始用最表單標籤，連結php，當繳交的時候就會觸發驗證函數，必利用DOM去抓取表單的值，判斷是否為空，為空的話就alert出警告訊息。這樣一個簡單的表單驗證就完成了!

另外如果是只能輸入數字區間的範例

JavaScript 驗證數字輸入

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript 驗證</h1>

<p>輸入1-10的數字</p>

<input id="numb">

<button type="button" onclick="myFunction()">Submit</button>

<p id="demo"></p>

<script>
function myFunction() {
  // 獲得input的值
  let x = document.getElementById("numb").value;
  let text;
  if (isNaN(x) || x < 1 || x > 10) {
    text = "输入無效(請輸入數字1-10)";
  } else {
    text = "ok!";
  }
  document.getElementById("demo").innerHTML = text;
}
</script>

</body>
</html>

HTML屬性自動驗證
HTML驗證屬性會透過瀏覽器自動執行，讓我們來看看範例。

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript 驗證</h1>

<form action="/demo/html/action_page.php" method="post">
  <input type="text" name="personname" required>
  <input type="submit" value="提交">
</form>


</body>
</html>

我們在input上添加了required屬性，代表欄位必填，沒有輸入訊息提交的話會顯示錯誤訊息。十分的實用!跟剛剛的程式碼差了一大段，因為驗證部分已經幫我們給寫好了!我們只需要加上屬性即可。

除了required之外，還有其他的驗證屬性提供我們使用嗎?當然有，下面是HTML限制驗證屬性。

HTML驗證屬性

屬性	描述
disabled	設定後input會反灰，不能輸入。
max	規定input輸入最大值。
min	規定input輸入最小值。
pattern	設定input元素的值模式。
required	設為必填。
type	規定輸入元素的類型。

而CSS部分有偽類選擇器讓我們使用。

CSS驗證偽類選擇器

選擇器	描述
:disabled	選擇設定了disabled屬性的元素。
:invalid	選擇無效的input元素。
:optional	選擇沒有設定required的元素。
:required	選擇設定required的元素。
:valid	選擇有效的input元素。