validate.js 使用教程

2026-01-23 06:03:14作者：齐添朝

1、项目介绍

validate.js 是一个轻量级的 JavaScript 表单验证库，灵感来源于 CodeIgniter 框架。它提供了丰富的验证规则，并且支持自定义消息和回调函数，适用于所有主流浏览器，包括 IE6。

主要特点

丰富的验证规则：支持超过十几种验证规则。
无依赖：不需要任何外部库依赖。
自定义消息：可以自定义错误消息。
链式方法：支持链式调用，便于声明和配置。
跨浏览器支持：兼容所有主流浏览器，包括 IE6。

2、项目快速启动

安装

你可以通过 npm 安装 validate.js：

npm install validate-js

使用示例

以下是一个简单的使用示例，展示了如何使用 validate.js 进行表单验证：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Validate.js Example</title>
    <script src="validate.min.js"></script>
</head>
<body>
    <form id="example_form">
        <input type="text" name="req" placeholder="Required Field">
        <input type="text" name="alphanumeric" placeholder="Alphanumeric Field">
        <input type="password" name="password" placeholder="Password">
        <input type="password" name="password_confirm" placeholder="Confirm Password">
        <input type="email" name="email" placeholder="Email">
        <input type="text" name="minlength" placeholder="Min Length 8">
        <button type="submit">Submit</button>
    </form>

    <script>
        var validator = new FormValidator('example_form', [
            { name: 'req', display: 'required', rules: 'required' },
            { name: 'alphanumeric', rules: 'alpha_numeric' },
            { name: 'password', rules: 'required' },
            { name: 'password_confirm', display: 'password confirmation', rules: 'required|matches[password]' },
            { name: 'email', rules: 'valid_email' },
            { name: 'minlength', display: 'min length', rules: 'min_length[8]' }
        ], function(errors) {
            if (errors.length > 0) {
                // 显示错误信息
                errors.forEach(function(error) {
                    console.log(error.message);
                });
            } else {
                // 表单验证通过
                console.log('Form is valid');
            }
        });
    </script>
</body>
</html>

3、应用案例和最佳实践

应用案例

用户注册表单：在用户注册表单中，使用 validate.js 验证用户名、密码、邮箱等字段。
评论系统：在评论系统中，验证用户输入的评论内容是否符合要求。
登录表单：在登录表单中，验证用户输入的用户名和密码是否符合要求。

最佳实践

自定义错误消息：通过自定义错误消息，提供更友好的用户体验。
链式调用：使用链式调用方式，简化验证规则的声明和配置。
跨浏览器测试：确保在所有主流浏览器中测试表单验证功能。

4、典型生态项目

jQuery 插件：validate_helper 是一个基于 jQuery 的 validate.js 插件，提供了更丰富的功能和更好的集成。
多语言支持：jnhwkim/validate.js 提供了多语言支持，包括中文、法语、巴西葡萄牙语等。
浏览器扩展：validate.js 可以与浏览器扩展结合，提供更强大的表单验证功能。

通过以上内容，你可以快速上手并使用 validate.js 进行表单验证。

validate.js

Lightweight JavaScript form validation library inspired by CodeIgniter.

项目地址：https://gitcode.com/gh_mirrors/val/validate.js

登录后查看全文