在前端开发过程中，表单验证是必不可少的一部分。而 validatr.js 正是一款轻量、简单易用的表单验证插件，它使用简单，能够有效地提升表单验证的效率。本文将详细介绍如何使用 validatr.js 进行表单验证。
安装 validatr.js
使用 validatr.js 首先要安装它。可以使用 npm 命令进行安装：
npm install validatr
也可以下载页面上的压缩包，然后将 js 文件复制到项目中。
引入 validatr.js
引入 validatr.js 和 jQuery 库，如果项目中已经引入了 jQuery 库，则该步骤可以省略。
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="../path/to/validatr.min.js"></script>
配置表单验证
使用 validatr.js 配置表单验证非常简单。只需在表单元素上添加特定的 data 属性即可。以下是一个简单的示例：
<form> <input type="text" name="name" data-validatr="required" placeholder="请输入姓名"> <input type="email" name="email" data-validatr="required|email" placeholder="请输入邮箱"> <button type="submit">提交</button> </form>
在上述示例中，表单元素包含两个 data 属性：data-validatr 和 placeholder。其中，data-validatr 的值指定了表单验证规则，多条规则可以用竖线分割；placeholder 则是给出了默认的占位符。
支持的验证规则如下:
required
必填项验证规则。
邮箱验证规则。
url
URL 验证规则。
number
数字验证规则。
integer
整数验证规则。
boolean
布尔值验证规则。
date
日期验证规则。
pattern
正则表达式验证规则。
max_length
最大长度验证规则。
min_length
最小长度验证规则。
exact_length
精确长度验证规则。
greater_than
数字大于验证规则。
less_than
数字小于验证规则。
max_date
大于等于指定日期验证规则。
min_date
小于等于指定日期验证规则。
match
两个字段一致验证规则。
unique
唯一性验证规则。
remote
远程验证规则。
实例操作
使用 validatr.js 进行表单验证只需一行代码：
$('form').validatr();而如果需要自定义错误提示消息，则可以使用以下方式：
$.validatr.messages.required = '该字段不能为空';
$.validatr.messages.email = '请输入正确的邮箱地址';
$('form').validatr();修改消息后，表单验证会显示新的错误消息。
结语
validatr.js 是一款非常适合进行表单验证的插件，使用它能够提高表单验证的效率。使用它的过程非常简单，只需安装、引入和配置即可。相信本文的介绍能够为大家进行表单验证提供一定的参考和帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005577f81e8991b448d47f5