推荐使用：Just-validate - 现代化、轻量级的表单验证库-CSDN博客

本文链接：https://blog.csdn.net/gitblog_00041/article/details/139108726

推荐使用：Just-validate - 现代化、轻量级的表单验证库

去发现同类优质开源项目:https://gitcode.com/

Just-validate Logo

Just-validate是一个由TypeScript编写的现代化、简单且轻量级（约5KB gzip压缩）的表单验证库，无需任何依赖（不包括JQuery）。它提供了广泛预定义的规则、异步验证、文件验证、日期验证以及自定义错误消息和样式等功能，同时还支持自定义规则和插件。

为何选择Just-validate？

如果你正在寻找一个适用于无React、JQuery等框架的网站或着陆页，以快速、简单且强大的方式处理表单验证，那么Just-validate将是你的理想选择。

项目特点：

小巧且零依赖：仅约5KB（gzip压缩后），无需额外加载其他库。
无需修改HTML：直接在现有表单上工作。
丰富预设规则：如必填、邮箱有效性、文本长度限制等。
自定义规则：允许你根据需求创建自己的验证规则。
支持插件：扩展功能，满足更多场景。
定制错误样式与消息：可以自定义错误字段的CSS类和错误消息。
自定义提示：以工具提示的形式显示错误信息。
错误标签位置可定制：将错误消息放置在你想要的位置。
国际化支持：定义不同语言的错误消息。
友好的设置流程：如配置不当会有console警告提示。
类型安全与良好测试覆盖率：采用TypeScript编写，拥有良好的单元测试覆盖。

安装与使用

你可以通过npm或yarn轻松安装Just-validate，并将其作为导入模块引入到项目中：

# 使用npm
npm install just-validate --save

# 或者使用yarn
yarn add just-validate

对于不使用模块打包器的环境，也可以从CDN引入并调用window.JustValidate：

<!-- 引入CDN脚本 -->
<script src="https://unpkg.com/just-validate@latest/dist/just-validate.production.min.js"></script>

<!-- 在HTML中的使用示例 -->
<body>
  <script>
    const validate = new window.JustValidate('#form');
  </script>
</body>

预设规则

Just-validate提供了许多内置验证规则，例如：

必填
非空字段
有效电子邮件地址
文本最小/最大长度
数字的有效性
数字范围
密码检查
坚实密码验证
自定义正则表达式
上传文件数量限制
上传文件大小、类型和扩展名限制
日期格式化校验以及日期前后比较

快速启动

让我们通过一个简单的HTML表单实例来了解如何使用Just-validate：

<form action="#" id="form" autocomplete="off">
  <!-- ... 表单元素 ... -->
</form>

只需以下几步即可完成基本验证设置：

创建new JustValidate('#form')实例。
调用.addField()方法，传入字段选择器和规则数组。

const validation = new JustValidate('#form');

validation
  .addField('#name', [
    { rule: 'minLength', value: 3 },
    { rule: 'maxLength', value: 30 },
  ])
  .addField('#email', [
    { rule: 'required', errorMessage: '邮件地址是必需的' },
    { rule: 'email', errorMessage: '邮件地址无效!' },
  ]);

如此，你的表单就具备了验证功能！