jQuery 表单验证扩展(三)

以下是详细的讲解：

jQuery 表单验证扩展(三) 完整攻略

前言

本文是 jQuery 表单验证扩展系列的第三篇，是在前两篇文章《jQuery 表单验证扩展(一) 》和《jQuery 表单验证扩展(二) 》的基础上讲解的。主要介绍了一些高级用法，如异步验证、自定义规则等内容。在此之前，如果您还没有了解过前两篇文章，请先移步了解。

异步验证

异步验证是指在提交表单时，通过发送 ajax 请求等方式，在后台进行一些逻辑判断，如果验证失败就不能提交表单。

我们可以通过 $.validator.addMethod 方法来自定义异步校验规则。比如下面的示例中，我们使用 ajax 方式验证输入的邮箱是否可用：

$.validator.addMethod("emailCheck", function(value, element) {
    var result = false;
    $.ajax({
        url: 'emailCheck.php',
        data: {email: value},
        type: 'POST',
        dataType: 'json',
        async: false,
        success: function(data) {
            result = data.status == 'success';
        }
    });
    return result;
}, "邮箱已经被注册了！");

这段代码中 emailCheck 是自定义的规则名，value 是当前表单元素的值，element 是当前表单元素对象。我们通过 ajax 发送请求，返回给 result 变量一个 bool 值，表示该邮箱是否可用。最后在表单验证中使用该规则即可，如下所示：

email: {
    required: true,
    emailCheck: true
}

表示邮箱必须填写，并且使用自定义的 emailCheck 规则进行异步验证。

自定义规则

如果您希望添加一些自己的规则，可以通过 $.validator.addMethod 方法来完成。比如下面的示例中，我们自定义一个规则，要求输入必须是 QQ 号：

$.validator.addMethod("qq", function(value, element) {
    var reg = /^[1-9]\d{4,9}$/; // 正则表达式
    return this.optional(element) || (reg.test(value));
}, "请输入正确的 QQ 号");

代码中，我们定义了规则名 qq，并实现了校验逻辑。我们通过正则表达式验证输入的内容是否符合 QQ 号的格式。最后在表单验证中使用该规则即可，如下所示：

qq: {
    required: true,
    qq: true
}

表示输入必须填写，且符合自定义的 qq 规则。

示例

以上是异步验证和自定义规则的详细讲解，下面我们来看看两个示例。

示例一

在这个示例中，我们要求表单必须同时填写用户名和密码，且密码长度必须大于等于6位。如果表单验证通过，就弹出一个提示框。下面是完整的示例代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery 表单验证示例</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery-validate/1.19.2/jquery.validate.min.js"></script>
</head>
<body>
    <form id="myForm" method="post">
        <label for="username">用户名：</label>
        <input type="text" id="username" name="username"><br>
        <label for="password">密码：</label>
        <input type="password" id="password" name="password"><br>
        <button type="submit">提交</button>
    </form>
    <script>
        $(function() {
            // 验证规则
            var rules = {
                username: {
                    required: true
                },
                password: {
                    required: true,
                    minlength: 6
                }
            };
            // 提示消息
            var messages = {
                username: {
                    required: "用户名不能为空"
                },
                password: {
                    required: "密码不能为空",
                    minlength: "密码长度不能小于6位"
                }
            };
            // 表单验证
            $("#myForm").validate({
                rules: rules,
                messages: messages,
                // 提交事件
                submitHandler: function() {
                    alert("验证通过，可以提交表单了！");
                }
            });
        });
    </script>
</body>
</html>

示例二

在这个示例中，我们要求输入必须是中文或英文，且长度在3-12个字符之间。下面是完整的示例代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery 表单验证示例</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery-validate/1.19.2/jquery.validate.min.js"></script>
</head>
<body>
    <form id="myForm" method="post">
        <label for="username">用户名：</label>
        <input type="text" id="username" name="username"><br>
        <button type="submit">提交</button>
    </form>
    <script>
        $(function() {
            // 验证规则
            var rules = {
                username: {
                    required: true,
                    rangelength: [3, 12],
                    chineseOrEnglish: true
                }
            };
            // 提示消息
            var messages = {
                username: {
                    required: "用户名不能为空",
                    rangelength: "用户名长度必须在3-12个字符之间",
                    chineseOrEnglish: "用户名只能由中文或英文组成"
                }
            };
            // 自定义规则
            $.validator.addMethod("chineseOrEnglish", function(value, element) {
                var reg = /^[\u4e00-\u9fa5a-zA-Z]+$/;
                return this.optional(element) || reg.test(value);
            }, "只能输入中文或英文");
            // 表单验证
            $("#myForm").validate({
                rules: rules,
                messages: messages
            });
        });
    </script>
</body>
</html>

在这个示例中，我们新增了自定义的规则 chineseOrEnglish，并验证用户输入的内容是否符合中文或英文的要求。最后在表单验证中使用该规则即可，如下所示：

username: {
    required: true,
    rangelength: [3, 12],
    chineseOrEnglish: true
}

总结

至此，本文对 jQuery 表单验证扩展(三)进行了完整的讲解，主要涉及到了异步验证、自定义规则等高级用法。在使用表单验证插件时，可以根据实际业务需要，灵活运用这些高级用法。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery 表单验证扩展(三) - Python技术站

jQuery 表单验证扩展(三)

jQuery 表单验证扩展(三) 完整攻略

前言

异步验证

自定义规则

示例

示例一

示例二

总结

相关文章