jQuery 验证插件 - Javascript

jQuery 是一种 JavaScript 库，它使得编写 JavaScript 更加容易的同时，也提供了丰富的特定功能，比如 Ajax 异步请求，在 DOM 树中查找元素等。

jQuery 验证插件是 jQuery 提供的一种验证表单输入的插件。它可以帮助开发者快速实现表单输入的验证，比如验证输入是否为空、格式是否正确等。这样可以避免开发者手动编写大量的验证代码，提高开发效率。

安装和使用

jQuery 验证插件可以通过以下方式进行安装：

使用 npm 安装

npm install jquery-validation

使用 CDN 引入

<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>

使用方式：

$(document).ready(function(){
    $("#myform").validate({
        rules: {
            // 在此处定义需要验证的表单输入
        },
        messages: {
            // 在此处定义验证未通过时的提示信息
        },
        submitHandler: function() {
            // 表单验证通过后的操作
        }
    });
});

验证规则

在 rules 属性中，可以定义要验证的表单输入，如下所示：

rules: {
    name: "required",
    email: {
        required: true,
        email: true
    },
    password: {
        required: true,
        minlength: 6
    },
    confirm_password: {
        required: true,
        minlength: 6,
        equalTo: "#password"
    }
}

上面的代码中，name 是必填项，email 必须满足 email 格式，password 和 confirm_password 都必须填写，且长度不能小于 6 个字符。此外，confirm_password 还需要和 password 的值相同。

验证错误提示

在 messages 属性中，可以定义当验证未通过时的提示信息，如下所示：

messages: {
    name: "请填写您的姓名",
    email: {
        required: "请填写您的邮箱",
        email: "请输入正确的邮箱格式"
    },
    password: {
        required: "请填写密码",
        minlength: "密码长度不能少于6个字符"
    },
    confirm_password: {
        required: "请填写确认密码",
        minlength: "密码长度不能少于6个字符",
        equalTo: "两次输入的密码不一致"
    }
}

上面的代码中，name 未填写时会提示 请填写您的姓名，email输入格式错误时会提示 请输入正确的邮箱格式。错误提示信息也可使用全局设置 $.validator.messages 进行统一设置。

自定义规则

在插件中也可自定义验证规则，如下所示：

$.validator.addMethod("regex", function(value, element, params) {
    var regex = new RegExp(params);
    return regex.test(value);
}, "输入格式不正确");

上面的代码中，$.validator.addMethod 为自定义规则函数，第一个参数为规则名称，第二个参数为验证函数，第三个参数为错误提示信息。

参考链接

• jQuery 验证插件官网