validate.js 詳解

表單驗證是 Web 開發的必要部分。validate.js 是一個輕型 JavaScript 庫，可用於在瀏覽器端和伺服器端進行表單驗證。它使用簡單且易於理解的 API，可以快速地進行表單驗證。本文將從多個方面對 validate.js 進行詳細闡述。

一、validate.js 官網

首先，我們來看一下 validate.js 的官方網站。（https://validatejs.org/）

validate.js 的官網提供了詳細和全面的文檔，包括API、示例、功能特點等。在首頁中，您可以看到一個基本的示例，展示了如何使用 validate.js 進行表單驗證。

//HTML代碼
<form id="register-form">
  <label for="name">Name:</label>
  <input id="name" name="name" required>

  <label for="email">Email:</label>
  <input id="email" name="email" type="email" required>

  <input type="submit" value="Submit">
</form>

//JavaScript 代碼
const constraints = {
  name: {
    presence: true,
  },
  email: {
    presence: true,
    email: true,
  },
};

const form = document.getElementById('register-form');

form.addEventListener('submit', function (event) {
  event.preventDefault();
  const formValues = {
    name: form.elements.name.value,
    email: form.elements.email.value,
  };

  const errors = validate(formValues, constraints);

  if (errors) {
    // ...show errors
  } else {
    // ...submit to server
  }
});

上述示例代碼使用了 name 和 email 進行驗證。如果表單中的任何一個欄位未填寫，或者 email 格式不正確，則會出現錯誤提示，否則成功提交表單。

二、validatejs 中文文檔

validate.js 提供了一個完整的中文文檔，介紹了許多基於 validate.js 的表單驗證方法。您可以在此處找到所有的 API、示例和其他有用的文檔。（https://validatejs.org/#docs）

三、validate.js 數組

我們可以使用 validate.js 進行數組的驗證。下面的示例演示了如何使用 validate.js 進行數組驗證：

//JavaScript 代碼
const constraints = {
  'my-array': {
    presence: true,
    length: {
      minimum: 1,
    },
    /* 這裡您可以添加其他驗證規則 */
  },
};

const formValues = {
  'my-array': [1, 2, 3],
};

const errors = validate(formValues, constraints);

if (errors) {
  // ...show errors
} else {
  // ...submit to server
}

上述示例演示了如何對數組進行驗證。’my-array’ 表示數組名稱，包含了必需和長度驗證。如果數組為空，則會出現錯誤提示（presence 驗證），否則會成功提交表單。

四、validate.js 數組校驗

validate.js 還允許您對數組進行驗證，可以在驗證單個欄位時使用。下面的示例演示了如何使用 validate.js 進行數組校驗：

//JavaScript 代碼
const constraints = {
  'my-array.*': {
    presence: true,
  },
};

const formValues = {
  'my-array': [1, 2, '', 4],
};

const errors = validate(formValues, constraints);

if (errors) {
  // ...show errors
} else {
  // ...submit to server
}

上述示例演示了如何對數組中的所有元素進行校驗。’my-array.*’ 表示數組的每個元素都需要進行必填驗證（presence 驗證）。如果數組中有空值，則會出現錯誤提示。

五、validate.js 組合驗證

使用 validate.js，可以輕鬆實現多項目表單驗證。下面的示例演示了如何使用 validate.js 進行組合驗證：

//JavaScript 代碼
const constraints = {
  username: {
    presence: true,
  },
  email: {
    presence: true,
    email: true,
  },
  password: {
    presence: true,
    length: {
      minimum: 6,
    },
  },
  'password-confirm': {
    presence: true,
    equality: 'password',
  },
};

const form = document.getElementById('register-form');

form.addEventListener('submit', function (event) {
  event.preventDefault();
  const formValues = {
    username: form.elements.username.value,
    email: form.elements.email.value,
    password: form.elements.password.value,
    'password-confirm': form.elements['password-confirm'].value,
  };

  const errors = validate(formValues, constraints);

  if (errors) {
    // ...show errors
  } else {
    // ...submit to server
  }
});

上述示例演示了使用 validate.js 進行更複雜的表單驗證。在此示例中，我們使用了 username、email、password 和 password-confirm 欄位進行驗證。如果欄位未填寫、密碼長度小於 6、確認密碼與密碼不一致，則會出現錯誤提示。

六、總結

本文介紹了 validate.js 的基本功能和用法。作為一個輕量、易用的表單驗證庫，validate.js 允許您驗證任何錶單。它提供了簡單而高效的 API，可以在使用時獨立完成表單驗證。在使用 validate.js 時，請確保您已經熟悉其文檔並遵循所有最佳實踐。使用 validate.js，您可以更好地管理表單數據，以及更好地為用戶提供反饋。