在前端开发工作中,表单验证是不可避免的部分。在过去,表单验证通常是通过手写 JavaScript 实现的。但是现在,有很多优秀的 npm 包可以用来简化我们的工作。在这篇文章中,我们将介绍一个流行的 npm 包:validator.js,帮助您快速实现表单验证。
什么是 validator.js?
validator.js 是一个轻量级的 JavaScript 库,可用于验证表单数据。该库提供了多种验证器,例如电子邮件,URL,字符串长度等等,而且 validator.js 能够适应浏览器端和服务器端环境。它的 API 简单易用,支持链式调用方式,可用于在不同的表单验证场景中,对数据进行检查和过滤。
安装和使用
使用 validator.js 很简单,只需在项目中执行以下命令安装:
npm install validator
然后就可以在项目中直接引入 validator.js:
import validator from 'validator';
或
const validator = require('validator');
常见的表单验证方法
非空验证
// 验证是否为空 validator.isEmpty(str); // 验证是否为数字 validator.isInt(str);
字符串验证
-- -------------------- ---- ------- -- -------- ------------------------ -- --------- ----------------------- -- --------- ------------------------- -- ------------ ------------------------------ -- -------- ----------------------- - ---
邮箱验证
// 验证是否为有效的电子邮件地址 validator.isEmail(email); // 验证是否为有效的钱包地址 validator.isHexadecimal(str);
URL 验证
// 验证是否为有效的 URL 地址 validator.isURL(url); // 验证是否为有效的电报 URL 地址 validator.isWhitelisted(url, ['t.me']);
字数验证
// 验证字符串是否在指定范围内 validator.isLength(str, { min: 4, max: 16 });
其他验证
-- -------------------- ---- ------- -- -------- -- -- -------------------- -- -------- ---- -- --------------------- ---- -- -------- --- -- ---------------------------- -- ------- -------------------------
高级使用
validator.js 还提供了一些高级特性,例如验证异步操作,自定义错误消息等。这里简单介绍一些:
自定义错误消息
const errMsg = 'The input is not a valid email address'; if (!validator.isEmail(email)) { throw new Error(errMsg); }
验证异步操作
可以使用 validator.Promise
方法来包装异步验证函数。
-- -------------------- ---- ------- ----------------- - --------------- --------------------------------------- -------- ----- - ------ --- -------------------------- --------- - ----------------------------- -------- ----- ------- - ---------------- --- --- ---
实战示例
现在,我们来实现一个简单的表单验证示例,验证用户输入的电子邮件和密码是否有效。
-- -------------------- ---- ------- ------ ----- ------ ----------------- ---------------- ------ ------------ ------------ ---------- ---------- ------ ----- ------ -------------------------------- ------ --------------- --------------- ------------- ---------- ------ ----- ------- ----------------------------- ------ -------
-- -------------------- ---- ------- ------ --------- ---- ------------ ----- ---- - ------------------------------- ------------------------------- -------- ------- - ----------------------- ----- ----- - ----------------- ----- -------- - -------------------- ----- ------ - ---- ----- -- --- ------- -- --------------------------- - -------------- ------- - -- ------------------------------ - ---- -- ---- -- --- - -------------- ------- - -- --- ---- -- ---- ------------ -- -------- ---
总结
本文介绍了一个常用的前端表单验证工具 validator.js。不仅有基础的验证方法,而且还提供了高级特性。通过本文的学习,希望您可以更快地完成前端表单验证工作,提高工作效率。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/64033