jquery formvalidator教程-建站教程-锦华智联科技

jQuery FormValidator 教程

jQuery FormValidator 是一个非常流行的、轻量级的 jQuery 插件，用于在客户端对表单进行验证，它的主要优点是：

易于使用：通过简单的 HTML 属性（如 data-rule="required"）即可实现复杂的验证规则。
功能强大：内置了多种常用验证规则（必填、邮箱、URL、长度、自定义正则表达式等）。
高度可定制：可以自定义错误消息、验证逻辑和样式。
用户体验好：支持实时验证、提交时验证、以及多种提示方式（如弹出框、内联提示）。

第一部分：基础入门

准备工作

你需要引入 jQuery 库和 FormValidator 插件的 CSS 及 JavaScript 文件，你可以从官方网站或 CDN 获取。

HTML 结构 (index.html)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">jQuery FormValidator 教程</title>
    <!-- 1. 引入 FormValidator 的 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jquery-formvalidator@2.3.79/dist/cssform/form-validator.min.css">
    <style>
        /* 一些自定义样式，让表单更好看 */
        body { font-family: Arial, sans-serif; padding: 20px; }
        .form-group { margin-bottom: 15px; }
        label { display: inline-block; width: 100px; }
        input[type="text"], input[type="email"] { padding: 8px; width: 250px; }
        button { padding: 10px 20px; background-color: #007bff; color: white; border: none; cursor: pointer; }
    </style>
</head>
<body>
    <h1>jQuery FormValidator 基础示例</h1>
    <!-- 2. 创建一个表单 -->
    <form id="signupForm">
        <div class="form-group">
            <label for="username">用户名</label>
            <input type="text" id="username" name="username">
        </div>
        <div class="form-group">
            <label for="email">电子邮箱</label>
            <input type="text" id="email" name="email">
        </div>
        <div class="form-group">
            <label for="password">密码</label>
            <input type="password" id="password" name="password">
        </div>
        <button type="submit">提交</button>
    </form>
    <!-- 3. 引入 jQuery 库 -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- 4. 引入 FormValidator 的 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/jquery-formvalidator@2.3.79/dist/js/jquery.form-validator.min.js"></script>
    <!-- 5. 编写初始化脚本 -->
    <script>
        $(document).ready(function() {
            // 使用默认的设置初始化表单验证
            $.validate();
        });
    </script>
</body>
</html>

如何添加验证规则？

FormValidator 最核心的功能就是通过给表单元素添加 data- 属性来定义验证规则。

data-validation：指定要应用的验证规则名称（如 required, email, length）。
data-validation-error-msg：指定验证失败时显示的错误消息。

让我们修改上面的 input 元素，为其添加验证规则：

<div class="form-group">
    <label for="username">用户名</label>
    <input type="text" id="username" name="username"
           data-validation="required length"
           data-validation-length="min3"
           data-validation-error-msg="用户名是必填项，且长度不能少于3个字符。">
</div>
<div class="form-group">
    <label for="email">电子邮箱</label>
    <input type="text" id="email" name="email"
           data-validation="required email"
           data-validation-error-msg="请输入一个有效的电子邮箱地址。">
</div>
<div class="form-group">
    <label for="password">密码</label>
    <input type="password" id="password" name="password"
           data-validation="required"
           data-validation-length="min8"
           data-validation-error-msg="密码是必填项，且长度不能少于8个字符。">
</div>

代码解释：

data-validation="required length"：表示这个字段必须同时满足“必填”和“长度”两个规则。
data-validation-length="min8"：这是 length 规则的参数，表示最小长度为8。
data-validation-error-msg="..."：自定义错误提示信息。

打开这个 HTML 文件，尝试提交表单或输入不符合规则的内容，你就会看到 FormValidator 开始工作了！

第二部分：常用验证规则

FormValidator 内置了大量验证规则，这里列出一些最常用的：

规则名称	描述	示例参数
`required`	字段为必填。	无
`email`	验证电子邮箱格式。	无
`url`	验证 URL 格式。	无
`number`	验证输入是否为数字。	无
`integer`	验证输入是否为整数。	无
`date`	验证日期格式 (YYYY-MM-DD)。	无
`dateTime`	验证日期时间格式。	无
`length`	验证字符串长度。	`min5`, `max10`, `range5-10`
`maxCheckbox`	限制复选框的最大选中数量。	`max3`
`minCheckbox`	限制复选框的最小选中数量。	`min1`
`equalTo`	验证输入是否等于另一个字段的值（常用于确认密码）。	`field:password_confirm`
`regex`	使用自定义正则表达式进行验证。	`regex:^[A-Za-z0-9]+$`
`funcCall`	调用自定义 JavaScript 函数进行验证。	`funcCall:myCustomFunction`

示例：确认密码

<div class="form-group">
    <label for="password_confirm">确认密码</label>
    <input type="password" id="password_confirm" name="password_confirm"
           data-validation="required"
           data-validation-equalto="password"
           data-validation-error-msg="两次输入的密码不一致。">
</div>

第三部分：高级配置与功能

使用 JavaScript 进行配置

除了 data- 属性，你还可以通过 JavaScript 进行更精细的控制，推荐使用 $.validate() 的配置对象。

$(document).ready(function() {
    $.validate({
        // 表单选择器
        form : '#signupForm',
        // 何时触发验证
        // 'onblur' (默认): 失去焦点时验证
        // 'onkeyup': 输入时验证
        // 'onsubmit': 提交时验证
        validateOnEvent : false, // 禁用事件触发，改为手动调用
        // 是否在表单提交前验证
        // true (默认): 提交前验证，失败则阻止提交
        // false: 不阻止提交，由开发者自己处理
        onSubmit : function(form) {
            // 你可以在这里添加自己的提交逻辑，比如使用 AJAX
            alert('表单验证通过，准备提交！');
            // 如果要阻止默认提交，可以这样做：
            // form.preventDefault(); 
            // return false;
        },
        // 是否显示所有错误信息，还是只显示第一个
        // true (默认): 只显示第一个错误
        // false: 显示所有错误
        showErrorsAsTabs : false,
        // 错误提示框的样式类
        errorElementClass: 'error',
        // 输入框验证通过时的样式类
        validElementClass: 'valid',
        // 强制使用内联提示，而不是弹出框
        // inlineMessages: true, // 需要配合 CSS 使用
    });
});

自定义验证规则

如果内置规则不能满足你的需求,你可以轻松地添加自己的规则。

场景：验证用户名只能包含字母、数字和下划线。

$(document).ready(function() {
    // 添加一个名为 'alphanumeric' 的自定义验证规则
    $.formUtils.registerValidator({
        // 规则名称
        name : 'alphanumeric',
        // 验证函数
        validatorFunction : function(value, $input, config) {
            // 使用正则表达式进行验证
            // 返回 true 表示验证通过，false 表示失败
            return /^[a-zA-Z