在前端开发中，经常需要对用户输入的数据进行校验，以保证数据的有效性和安全性。regulator.min.js 是一个专门用于表单校验的 npm 包，既方便实用，又能提高开发效率。本篇文章将详细介绍 regulator.min.js 的使用方法及注意事项。
安装
安装 regulator.min.js 很简单，只需要在项目目录下运行以下命令：
npm i regulator.min.js
引入
使用 ES6 模块方式引入：
import { Regulator } from 'regulator.min.js';或者在 html 模板中使用 script 标签：
<script src="./node_modules/regulator.min.js/dist/regulator.min.js"></script>
使用
Regulator 对象提供了一系列的校验方法，包括必填项、手机号、邮箱、密码等等。使用前需要先创建一个 Regulator 对象，并传入需要校验的表单元素和对应的校验规则。例如：
<form> <input type="text" id="username" name="username" placeholder="请输入用户名"> <input type="password" id="password" name="password" placeholder="请输入密码"> <input type="email" id="email" name="email" placeholder="请输入邮箱"> <input type="submit" value="提交"> </form>
-- -------------------- ---- -------
----- ----- - -
--------- -
--------- -----
-------- --------------------
--
--------- -
--------- -----
-------- -------------------------------------------
--
------ -
--------- -----
-------- ---------------------------------
-
--
----- ---- - -------------------------------
----- --------- - --- --------------- -------在上面的代码中，我们通过传入表单元素和规则对象，创建一个 Regulator 实例。规则对象包含了对每一个表单元素的校验规则，如上面代码所示，username 必填，同时填写的内容需要匹配 \w{4,15} 的正则表达式。
当用户点击提交按钮时，我们可以调用 regulator 对象的 validate 方法来执行校验。该方法会返回一个校验结果对象，包含了所有表单元素的校验结果：
-- -------------------- ---- -------
------------------------------- ------- -- -
-----------------------
----- ------ - ---------------------
-- ------------- -
-- ---------
- ---- -
-- --------------
--------------------------------
-
---如果校验不通过，我们可以通过 result 对象的 errors 属性获取错误信息。
API
Regulator(form: HTMLFormElement, rules: object): Regulator
构造函数，创建一个 Regulator 对象。form 参数是需要进行表单校验的 HTMLFormElement 元素，rules 参数是一个对象，其中每个属性对应一个表单元素的校验规则。
Regulator.validate(): object
校验表单，返回一个校验结果对象。该对象包含了所有表单元素的校验结果，包括 pass 字段（表示是否校验通过）、errors 字段（表示校验不通过的表单元素及对应的错误信息）。
校验规则
校验规则对象包括了需要校验的 key 和对应的规则，规则列表如下：
- required: Boolean，是否为必填项
- pattern: RegExp，正则表达式校验规则
- min: Number，最小值
- max: Number，最大值
- minLength: Number，最短长度
- maxLength: Number，最长长度
- email: Boolean，是否为邮箱
- phone: Boolean，是否为手机号
- idCard: Boolean，是否为身份证号
- url: Boolean，是否为 URL
示例代码
下面的代码演示了如何通过 Regulator 对象对表单进行校验：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------------- ----------
-------
------
------
------ ----------- ------------- --------------- ---------------------
------ --------------- ------------- --------------- --------------------
------ ------------ ---------- ------------ --------------------
------ ------------- -----------
-------
------- ---------------------------------------------------------------------
--------
----- ----- - -
--------- -
--------- -----
-------- --------------------
--
--------- -
--------- -----
-------- -------------------------------------------
--
------ -
--------- -----
-------- ---------------------------------
-
--
----- ---- - -------------------------------
----- --------- - --- --------------- -------
------------------------------- ------- -- -
-----------------------
----- ------ - ---------------------
-- ------------- -
-----------------
- ---- -
--------------------------------
-
---
---------
-------
-------运行该示例，即可通过 regulator 对象对表单进行校验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bce967216659e244b22