深入探究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是一个简单易用、高度可定制化的表单验证库。它具有丰富的内置验证规则，并且支持自定义规则。使用它可以让我们的表单交互更加友好，提高用户体验。