深入探究Notvalid

一、Notvalid是什麼？

Notvalid是一個JavaScript庫，旨在提供一種可重用的、簡單易用的方式來驗證表單輸入的數據。它提供了很多內置的驗證規則，以及支持自定義驗證規則的接口。我們可以在輸入框失去焦點或提交表單時調用它的驗證函數，來判斷用戶輸入的數據是否合法。

使用Notvalid可以讓我們的表單交互更加友好，能夠在用戶提交表單前，給予及時的提示和反饋。

二、如何使用Notvalid？

我們可以通過在HTML中引入Notvalid的庫文件，在需要驗證的表單元素中添加data-validation屬性，並設置對應的驗證規則。例如，我們想要驗證一個輸入框是否為空，可以在輸入框中添加data-validation=”required”。

另外，我們還需要在JavaScript代碼中使用Notvalid的API來調用驗證函數。在表單提交前，我們可以調用$form.validate()方法來驗證表單的所有input元素。

<script src="notvalid.min.js"></script>
<form id="test-form">
  <input type="text" name="name" data-validation="required"/>
  <input type="email" name="email" data-validation="email"/>
  <button type="submit">Submit</button>
</form>

<script type="text/javascript">
  var $form = document.getElementById('test-form');
  $form.addEventListener('submit', function(e) {
    if ($form.validate() === false) {
      e.preventDefault();
    }
  });
</script>

三、內置的驗證規則

Notvalid提供了許多內置的驗證規則，可以滿足大多數情況下的需求。例如下表列舉了常用的幾種規則：

我們可以將對應的規則添加到對應的input元素的data-validation屬性中，例如：

<input type="text" name="email" data-validation="email"/>

四、自定義驗證規則

在一些特殊的場景下，我們可能需要自定義驗證規則。Notvalid提供了一個addValidator方法，可以讓我們自定義驗證規則。

例如，我們要驗證一個輸入框的值是否與另一個輸入框的值相等，我們可以添加一個自定義的驗證規則：

<input type="text" name="password1" />
<input type="text" name="password2" data-validation="passwordMatch" />

<script type="text/javascript">
  notvalid.addValidator('passwordMatch', function(el) {
    var password1 = document.querySelector('[name="password1"]').value;
    return (el.value === password1);
  }, 'Passwords do not match.');
</script>

在上面的代碼中，我們將密碼輸入框password2的data-validation屬性設置為passwordMatch。然後，我們在JavaScript中使用addValidator方法，定義了一個名為passwordMatch的驗證規則。這個規則會獲取另一個密碼輸入框password1的值，並判斷兩個輸入框的值是否相同。

如果相同，則返回true，代表驗證通過。如果不同，則返回false，並且提供一條錯誤信息：”Passwords do not match.”。

五、總結

Notvalid是一個簡單易用、高度可定製化的表單驗證庫。它具有豐富的內置驗證規則，並且支持自定義規則。使用它可以讓我們的表單交互更加友好，提高用戶體驗。