简介
nsr 是一个专门用于前端开发的 npm 包，它提供了一种简洁明了的方式来进行表单验证和数据处理。借助 nsr，界面可以更加友好，用户体验也会更加顺畅。
安装
Node.js 环境
要使用 nsr，你首先要确保你已经安装了 Node.js 环境。在终端中输入以下命令确认你的 Node.js 版本：
node -v
如果你还没有安装 Node.js 环境，你可以从官网 nodejs.org 下载到最新版本。nsr 可以在 Node.js 的版本 >= 10.0 上运行。
安装 nsr
在 Node.js 的环境下，你可以通过以下命令安装 nsr：
npm install nsr
使用
引入 nsr
在页面中引入 nsr：
<script src="node_modules/nsr/dist/nsr.min.js"></script>
表单验证
初始化验证
使用 nsr 进行表单验证的第一步，就是初始化验证器。nsr 提供了两种方式来构建验证器，一种是通过 JSON 对象定义表单元素的规则，另一种是通过自定义函数。
JSON 验证器
nsr 通过在 HTML 元素的 data-nsr 属性中设置 JSON 对象，来定义表单元素的验证规则。
<form id="my-form">
<input type="text" data-nsr='{"required": true, "maxlength": 10}' />
<input type="email" data-nsr='{"required": true, "regex": "^\\w+@[a-zA-Z_]+?\\.[a-zA-Z]{2,3}$"}' />
<button type="submit">Submit</button>
</form>在 JavaScript 中初始化验证器：
const myForm = document.querySelector('#my-form')
const myValidator = nsr.init(myForm)在表单提交时进行验证：
myForm.addEventListener('submit', e => {
e.preventDefault()
if (myValidator.validate()) {
// 验证通过，进行表单提交
} else {
// 验证失败，展示提示信息
}
})自定义函数验证器
除了 JSON 对象外，你也可以使用自定义的函数来进行验证。
-- -------------------- ---- -------
----- -------------
------ ----------- -----------
----------- -----
----------- -------- ------- -
------ ------------------- -- - -- ------------------- -- -
-
-- --
------- -----------------------------
-------在这个例子中，我们同时定义了一个 required 和一个自定义函数 validate。在自定义函数中，我们检查了输入值是否为 3-8 个字符长度。
显示提示信息
当表单验证失败时，nsr 会在元素的下方自动生成一个 span 元素用于显示提示信息。你可以使用以下方式为提示信息添加样式：
.nsr-error {
color: red;
font-size: 12px;
}数据处理
nsr 也提供了一些数据处理的方法来应对表单提交时的数据处理和转换需求。
初始化处理器
在表单数据处理中，nsr 的第一步是初始化处理器。你可以通过以下方式构建处理器：
const myForm = document.querySelector('#my-form')
const myHandler = nsr.initHandler(myForm)值提取器
通过值提取器，我们可以方便地获得表单中所有元素的值。
const myForm = document.querySelector('#my-form')
const myHandler = nsr.initHandler(myForm)
const values = myHandler.values()
console.log(values)在这个例子中，我们将返回所有表单元素的值。
值转换器
值转换器可以将表单元素的值转换为我们想要的格式。
const myForm = document.querySelector('#my-form')
const myHandler = nsr.initHandler(myForm)
myHandler.convertValue('input[name="age"]', parseInt)在这个例子中，我们将表单元素 input[name="age"] 的值，转换为整数类型。
值填充器
值填充器可以将一组数据填充到表单中的表单元素上。
const data = { name: 'Tom', age: 18, gender: 'male' }
const myForm = document.querySelector('#my-form')
const myHandler = nsr.initHandler(myForm)
myHandler.fill(data)在这个例子中，我们将包含了用户信息的对象 data 填充到表单中。
总结
nsr 是一个优秀的 npm 包，它在前端开发中应用极为广泛，提供了强大的表单验证和数据处理功能。借助 nsr，你可以快速构建出一个友好且安全的前端界面。
示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
---------- --------------
-------
---------- -
------ ----
---------- -----
-
--------
-------
------
----- -------------
------------ --------
------ ----------- ---------------------- ------ ----------- --
--- --
----------- --------
------ ----------- ---------------------- ----- ---------- ------ ---------- --
--- --
------------- --------
------
------------
---------------------- ----- -------- --------------------------------------
------------
--
--- --
-------------- --------
------- ---------------------- ------ --------------
------- --------------- ---------------
------- --------------------------
------- ------------------------------
---------
--- --
------- -----------------------------
-------
------- ------------------------------------------------
--------
----- ------ - ----------------------------------
----- ----------- - ----------------
----- --------- - -----------------------
--------------------------------- - -- -
------------------
-- ------------------------ -
----- ------ - ------------------
-------------------
-- ------ ----------------- --- ----------------
------------------------------------------- ---------
----- ---- - ------------------
-----------------
- ---- -
----------------------- ---------
-
--
-- ------------------------
----- ---- - - ----- ---------- ---- ----- ------ ---------------------- ------- ------ -
--------------------
---------
-------
-------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f933d1de16d83a66bc3