jquery validate添加自定义验证规则(验证邮箱邮政编码)

以下是关于jquery validate添加自定义验证规则的完整攻略。

什么是jquery validate？

jQuery validate是一个基于jQuery的表单验证插件，它可以对表单中的各类数据进行校验，从而帮助我们减少了客户端数据校验的代码量，提高了开发效率。

如何添加自定义验证规则？

jquery validate插件提供了丰富的内置验证规则，但如果我们的业务需求中还有一些特定的数据需要进行验证，那么我们可以自定义验证规则。下面是通过jquery validate添加自定义验证规则的步骤：

定义验证规则
我们首先需要定义自己所需要的验证规则，参考如下代码：

// 验证邮箱格式
$.validator.addMethod("email",function(value,element){
    var mailReg = /^\w+$/;
    return this.optional(element) || mailReg.test(value);
},"请输入正确的邮箱格式");

// 邮政编码验证规则
$.validator.addMethod("zipcode",function(value,element){
     var zipReg = /^[0-9]{6}$/;
     return this.optional(element) || (zipReg.test(value));
},"请正确填写邮政编码");

在上述代码中，我们定义了两种规则：email和zipcode。其中，email用于验证用户输入的邮箱格式是否正确，而zipcode用于验证邮政编码是否正确。

调用自定义规则

定义完规则后，我们还需要在实际应用中调用我们定义的规则，以使其生效。在调用时需要使用$.validator.setDefaults方法为这些规则设置默认的（通用的）选项。如下所示：

$.validator.setDefaults({
    // 当表单验证失败时，显示错误信息
    errorPlacement: function(error, element) {
        error.appendTo(element.parent());
    }
});

$().ready(function(){
    // 表单验证
    $("#myform").validate({
        // 验证规则
        rules: {
            // 对id名称的元素进行email验证，其对应的规则为email,并提示“请输入正确的邮箱格式”
            email: {
                required: true,
                email: true
            },
            // 对id名称的元素进行邮政编码验证，其对应的规则为zipcode,并提示“请正确填写邮政编码”
            zipcode: {
                required: true,
                zipcode: true
            }
        }
    });
});

在上述代码中，我们首先使用$.validator.setDefaults方法为我们定义的规则设置了一个通用选项，在本例中，我们在errorPlacement选项中规定了失败时错误信息的显示方式。接下来，我们定义了一个表单myform，并为其设置了验证规则。

定义了验证规则之后，我们需要为需要验证的表单元素增加规则，并指定对应的自定义验证规则，并在其中加入提示信息。例如，我们为文本框email指定了需要进行email验证和必须输入两个规则，同时，也为它定义了一条验证未通过时的提示信息。

示例1

下面是一个简单示例，演示了如何使用jquery validate进行email验证。具体代码如下：

<!doctype html>
<html>
<head>
    <title>实例1：使用jquery validate进行email验证</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
    <script type="text/javascript">
        $(function(){
            // 添加自定义验证规则
            $.validator.addMethod("email", function(value, element){
                var emailReg = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/;
                return this.optional(element) || emailReg.test(value);
            },"请正确填写email格式");

            // 加载验证规则
            $("#myform").validate({
                rules: {
                    email: {
                        email: true,
                        required: true
                    }
                }
            });
        });
    </script>
    <style>
        #myform label.error {
            color:red;
        }
    </style>
</head>
<body>
<h2>实例1：使用jquery validate进行email验证</h2>
<form action="" method="post" id="myform">
    <p>
        <label>邮箱：</label>
        <input type="text" id="email" name="email">
    </p>
    <p>
        <button type="submit">提交</button>
    </p>
</form>
</body>
</html>

在上述示例中，我们在脚本中添加了一个名为email的自定义验证规则，并在提交按钮被按下时加载了该规则，并指定并对文本框email进行了email验证。

示例2

下面是一个简单示例，演示了如何使用jquery validate进行email验证和邮政编码验证。具体代码如下：

<!doctype html>
<html>
<head>
    <title>实例2：使用jquery validate进行email和邮政编码验证</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
    <script type="text/javascript">
        $(function(){
            // 自定义验证规则
            $.validator.addMethod("email", function(value, element){
                var emailReg =/^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/;
                return this.optional(element) || emailReg.test(value);
            },"请正确填写email格式");

            $.validator.addMethod("zipcode", function(value, element){
                var zipReg = /^[0-9]{6}$/;
                return this.optional(element) || zipReg.test(value);
            },"请正确填写邮政编码");

            // 加载验证规则
            $("#myform").validate({
                rules: {
                    email: {
                        required: true,
                        email: true
                    },
                    code: {
                        required: true,
                        zipcode: true
                    }
                }
            });
        });
    </script>
    <style>
        #myform label.error {
            color:red;
        }
    </style>
</head>
<body>
<h2>实例2：使用jquery validate进行email和邮政编码验证</h2>
<form action="" method="post" id="myform">
    <p>
        <label>邮箱：</label>
        <input type="text" id="email" name="email">
    </p>
    <p>
        <label>邮政编码：</label>
        <input type="text" id="code" name="code">
    </p>
    <p>
        <button type="submit">提交</button>
    </p>
</form>
</body>
</html>

在上述示例中，我们在脚本中添加了一个名为email的自定义验证规则和一个名为zipcode的自定义验证规则，并在提交按钮被按下时加载了这两条规则，并分别对文本框email和code进行了email验证和邮政编码验证。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jquery validate添加自定义验证规则(验证邮箱邮政编码) - Python技术站