jquery validate 中highlight和unhighlight使用

最新推荐文章于 2025-06-03 10:36:29 发布

weixin_30568591

最新推荐文章于 2025-06-03 10:36:29 发布

阅读量610

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/booth/archive/2012/06/08/2541792.html

本文介绍了一个使用jQuery的表单验证插件示例，该插件为表单输入字段提供了一系列验证规则，包括必填项、邮箱格式校验及确认邮箱一致性等。文章通过具体代码展示了如何设置验证规则及错误消息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

$(document).ready(function () {
            $('span.required').find('input').addClass('required');

            $('#form1').validate({
                rules: {
                    txbCnfEmail: {
                        required: true,
                        email: true,
                        equalTo: "#txbEmail"
                    }
                },
                messages: {
                    txbFirstname: "Please enter your First Name",
                    txbLastname: "Please enter your Last Name",
                    txbAddress1: "Please enter your Mailing Address 1",
                    txbSuburb: "Please enter your Suburb",
                    ddlCountry: "Please select your country",
                    txbPostcode: {
                        required: "Please enter your Postcode",
                        number: "Please enter a valid Postcode"
                    },
                    ddlGender: "Please select your Gender",
                    ddlAge: "Please select your Age",
                    ddlHearFrom: "Please select",
                    txbEmail: {
                        required: "Please enter your Email Address",
                        email: "Please enter a valid Email Address"
                    },
                    txbCnfEmail: {
                        required: "Please enter a valid Confirm Email Address",
                        email: "Please enter a valid Confirm Email Address",
                        equalTo: "Confirm email address doesn't match the email address"
                    }
                },
                errorLabelContainer: "#error", 
                highlight: function (element, errorClass) {
                    $(element).addClass(errorClass);
                    $("#error").find("label[for=" + element.id + "]")
                    .addClass(errorClass);
                    $(element).prev('label').addClass('error2');
                },
                unhighlight: function (element, errorClass) {
                    $(element).removeClass(errorClass);
                    $("#error").find("label[for=" + element.id + "]")
                    .removeClass(errorClass).css("display", "none");
                    $(element).prev('label').removeClass('error2');
                }
            });
        });