前言
前端领域中，表单验证一直是一个非常重要并且基础的技术。在实际开发过程中，我们需要对表单中输入的数据进行各种校验，包括非空、长度、格式等。在这种需求下，valdi(https://www.npmjs.com/package/valdi)成了表单验证的好帮手。它是一个基于 Vue.js 的表单验证库，帮助我们快速完成各种表单校验，同时还能进行自定义扩展。
安装
在使用 valdi 前，需要确保已在项目中安装 Vue.js 的依赖。
使用 npm 安装 valdi
$ npm install valdi --save
在 main.js 中引入 valdi
import Vue from 'vue' import valdi from 'valdi' Vue.use(valdi)
这样，我们就可以在所有的 Vue 实例中使用 valdi 了。
基本使用
在 Vue.js 的实例中引入 valdi 之后，我们就可以开始使用它的校验方法了。下面我们通过一个简单的示例来了解 valdi 的基本用法。
首先，在一个 Vue 实例内定义需要进行校验的输入框和校验规则：
-- -------------------- ---- -------
----------
-----
------ ---------------------------
------ ------------- ----------- -------------------
---------- ----------------
---- ----------------
-----------------------------------------
------
------------
--------
------ --------------------------
------ ------------- --------------- -------------------
---------- ----------------
---- ----------------
-----------------------------------------
------
------------
--------
------- ------------- -----------------------------------
------
-----------
--------
------ ------- -
------ -
------ -
--------- ---
--------- ---
-
--
-------- -
-------- -
-----------------------------
-------- -- -
-------------
--
--------- -- -
-------------
--
-
--
------------ -
--------- - -------- --
--------- - -------- --
--
-
---------在模板中，我们定义了两个输入框：一个用来输入用户名，一个用来输入密码。
对于每个输入框，我们都包含了一个 valdi 的标签，在标签中定义了一个插槽，插槽的名称对应了当前输入框的字段名，即 "username" 和 "password"。通过这种方式，我们可以将校验结果动态地展示出来。
另外，我们还定义了一个提交按钮，在点击按钮时会调用 submit 函数。submit 函数是一个 valdi 校验函数，它使用了 validateAll 方法来实现对所有校验规则的校验。校验通过时，弹出“校验通过”的提示；校验失败时，弹出“校验失败”的提示。
最后，我们将校验规则放在了 Vue 实例的 validations 属性中。在这里，我们使用了 valdi 的内置校验规则 required 来检查用户名和密码是否为空。如果字段为空，则会返回一个错误消息。
在浏览器中运行上面代码，我们可以看到如下的输入框及其校验结果。
值得注意的是，在定义校验规则时，我们可以选择直接使用内置规则，也可以进行自定义扩展。后者可以帮助我们解决一些特定的校验需求，如电话号码、邮箱地址等格式校验。接下来，我们演示一下自定义扩展的用法。
自定义扩展
valdi 可以让我们通过自定义扩展来实现校验规则的个性化定制。下面，我们通过示例来看一下如何进行自定义扩展。
假设我们需要进行电话号码校验。我们可以定义一个自定义规则，在校验时使用它来检查电话号码的输入是否合法。在这里，我们定义了一个名为 phone 的自定义规则，检查用户输入的电话号码是否符合特定的格式。值得注意的是，自定义规则中的 defaultMessage 属性定义了校验失败时的错误消息。
-- -------------------- ---- -------
------ --- ---- -----
------ ----- ---- -------
--------------
--------------------- -
----------------- -
------ ---------------
--
--------------- -
----- ---------- - ---------------
------ ----------------------
--
--------------- -------------
--在成功定义自定义规则之后，我们可以在模板中使用它了。
-- -------------------- ---- -------
----------
-----
------ -------------------------
------ ---------- ----------- ----------------
---------- ----------------
---- -------------
--------------------------------------
------
------------
--------
------- ------------- -----------------------------------
------
-----------
--------
------ ------- -
------ -
------ -
------ ---
-
--
-------- -
-------- -
-----------------------------
-------- -- -
-------------
--
--------- -- -
-------------
--
-
--
------------ -
------ - --------- ----- --
--
-
---------在这里，我们定义了一个名为 phone 的输入框，它使用了自定义规则 phone 来检查电话号码输入的正确性。
在浏览器中运行上面代码，我们可以看到如下的输入框及其校验结果。
可以看到，自定义规则在 valdi 中扩展校验规则是非常方便的。在实际开发中，我们可以依照自己的需求，定义更多的自定义规则，来完成各种复杂的表单校验。
结语
本文针对前端领域中表单验证相关的需求，介绍了 valdi 库的使用方法。在实际的开发中，表单验证对于数据的规范化具有重要的作用，valdi 的使用无疑可以帮助我们更快、更准地完成各种复杂的表单校验任务，提高了开发效率。希望本文可以为前端开发者提供一些帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005572681e8991b448d419e