Web - 第二十三章 | HTML 表單資料驗證(二)

var form  = document.getElementsByTagName('form')[0];
var email = document.getElementById('mail');
var error = document.querySelector('.error');

email.addEventListener("input", function (event) {
  // 當用戶輸入訊息時，驗證 email 字段
  if (email.validity.valid) {
    // 如果驗證通過，清除已顯示的錯誤消息
    error.innerHTML = ""; // 重置消息的内容
    error.className = "error"; // 重置消息的顯示狀態
  }
}, false);
form.addEventListener("submit", function (event) {
  // 當用戶提交表單時，驗證 email 字段
  if (!email.validity.valid) {
    
    // 如果驗證失敗，顯示一個自定義錯誤
    error.innerHTML = "I expect an e-mail, darling!";
    error.className = "error active";
    // 還需要阻止表單提交事件，以取消資料傳送
    event.preventDefault();
  }
}, false);

var form  = document.getElementsByTagName('form')[0];
var email = document.getElementById('mail');

// 以下是在 DOM 中訪問下一個兄弟元素的技巧
// 這比較危險，很容易引起無限循環
// 在現代瀏覽器中，應該使用 element.nextElementSibling
var error = email;
while ((error = error.nextSibling).nodeType != 1);

// 按照 HTML5 規範
var emailRegExp = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;

// 許多舊版瀏覽器不支持 addEventListener 方法
// 這只是其中一種簡單的處理方法
function addEvent(element, event, callback) {
  var previousEventCallBack = element["on"+event];
  element["on"+event] = function (e) {
    var output = callback(e);
    
    // 返回 `false` 来停止回調，並中斷事件的執行
    if (output === false) return false;

    if (typeof previousEventCallBack === 'function') {
      output = previousEventCallBack(e);
      if(output === false) return false;
    }
  }
};

// 現在我們可以重構字段的驗證約束了
// 由於不使用 CSS 偽類, 我們必須明確地設置 valid 或 invalid 類到 email 字段上
addEvent(window, "load", function () {
  // 在這裡驗證字段是否為空（請記住，該字段不是必需的）
  // 如果非空，檢查它的內容格式是不是合格的 e-mail 地址
  var test = email.value.length === 0 || emailRegExp.test(email.value);
 
  email.className = test ? "valid" : "invalid";
});

// 處理用戶輸入事件
addEvent(email, "input", function () {
  var test = email.value.length === 0 || emailRegExp.test(email.value);
  if (test) {
    email.className = "valid";
    error.innerHTML = "";
    error.className = "error";
  } else {
    email.className = "invalid";
  }
});

// 處理表單提交事件
addEvent(form, "submit", function () {
  var test = email.value.length === 0 || emailRegExp.test(email.value);
 
  if (!test) {
    email.className = "invalid";
    error.innerHTML = "I expect an e-mail, darling!";
    error.className = "error active";

    // 某些舊版瀏覽器不支持 event.preventDefault() 方法
    return false;
  } else {
    email.className = "valid";
    error.innerHTML = "";
    error.className = "error";
  }
});