jquery表单验证小结

jquery表单验证小结

下面将讲述的是一个完整的jquery表单验证实例，该实例覆盖了jquery验证的大部分知识点，比如验证框架，messages的扩展和自定义方法的定义以及在验证中的应用等，接下来我将验证的实例分为两部分，前台和后台。

前台：

1.定义一个表单并编写表单内容，下面的定义需要注意，每个input建议同时定义id和name

<form id="myform" method="post">

    <table>

        <tbody>

            <tr>

                <td>用户名</td>

                <td>

                    <input type="text" id="username" name="username" /></td>

                <td></td>

            </tr>

            <tr>

                <td>密码</td>

                <td>

                    <input type="password" id="firstpwd" name="firstpwd" /></td>

                <td></td>

            </tr>

            <tr>

                <td>确认密码</td>

                <td>

                    <input type="password" id="secondpwd" name="secondpwd" /></td>

                <td></td>

            </tr>

            <tr>

                <td>性别</td>

                <td>

                    <input type="radio" id="sex" name="sex" />男

                        <input type="radio" id="sex1" name="sex" />女

                </td>

                <td></td>

            </tr>

            <tr>

                <td>年龄</td>

                <td>

                    <input type="text" id="age" name="age" /></td>

                <td></td>

            </tr>

            <tr>

                <td>邮箱</td>

                <td>

                    <input type="text" id="email" name="email" /></td>

                <td></td>

            </tr>

            <tr>

                <td>个人网页</td>

                <td>

                    <input type="text" id="purl" name="purl" /></td>

                <td></td>

            </tr>

            <tr>

                <td>手机</td>

                <td>

                    <input type="text" id="mobile" name="mobile" /></td>

                <td></td>

            </tr>

            <tr>

                <td>附件</td>

                <td>

                    <input type="file" id="afile" name="afile" /></td>

                <td></td>

            </tr>

            <tr>

                <td colspan="3">

                    <input type="submit" id="submit" name="submit" value="保存" />

                    <button id="btn">重置</button>

                </td>

            </tr>

        </tbody>

    </table>

</form>

2.定义验证通过和验证失败的提示信息样式

<style type="text/css">

    label

    {

        font-size: smaller;

        width: 10em;

        float: left;

    }

        label.invalid

        {

            color: red;

            padding-left: 18px;

            vertical-align: top;

            width: 196px;

            background: url('../../Content/themes/base/Image/onError.gif') no-repeat;

        }

        label.valid

        {

            background: url('../../Content/themes/base/Image/onCorrect.gif') no-repeat;

            color: #065FB9;

        }

</style>

3.接下来将进入jquery验证的核心部分，在开始之前请确保前台页面引用以下两个js插件

<script src="../../Scripts/jquery-1.7.1.min.js"></script>

<script src="../../Scripts/jquery.validate.min.js"></script>

确定引用之后我们开始定义jquery表单验证的核心框架，该框架由若干部分组成，下面我们列出能满足我们普通验证常用的几部分内容，比如：调试模式的控制、rules的定义、messages的定义和重写、验证成功和失败的处理、自定义验证和应用自定义验证。

验证的主体框架如下所示：

$("#formid").validate({

            debug: true,

            rules: {

                //规定表单中各项的验证规则，规则有一部分是系统封装定义好的，可根据验证需求自己增加自定义验证方法

            },

            messages: {

                //规定验证失败所提示的信息

            },

            onfocusout: false,//为true则焦点离开时验证，如果表单中没有输入任何内容，所有的规则将被跳过，除非该        表单被标记为无效

            focusInvalid: true,//为true则当验证无效时，焦点跳到第一个无效的表单元素，否则没有焦点响应

            onkeyup: false,//为true则当键盘按键弹起时验证，若表单元素没有被标记成无效的，不会有任何反应

            submitHandler: function (form) {

               //验证成功后提交表单

            },

            errorClass: "invalid",//验证失败样式定义，其中invalid为样式名称

            errorPlacement: function (error, element) {

                error.appendTo($(element).parent("td").next("td")) //定义验证提示信息显示的位置

            },

            highlight: function (element, errorClass) {

                $(element).addClass(errorClass);//添加验证失败样式，errorClass在上面已经定义好

            },

            success: function (label) {

                $(label).html("&nbsp").addClass("valid");//添加验证成功样式，valid在上面样式表已有定义

            }

        });

接下来将列出一个完整的验证框架，包括remote（ajax异步验证用户是否被注册）、自定义验证方法、重写messages等

<script type="text/javascript">

    $(function () {

        //自定义手机号码验证   

        jQuery.validator.addMethod("isMobile", function (value, element) {

            var tel = /^0?1[358]\d{9}$/;

            return this.optional(element) || (tel.test(value));

        }, "请正确填写您的手机");

        $("#myform").validate({

            debug: true,

            rules: {

                username: {

                    required: true,

                    minlength: 2,

                    //ajax异步验证，验证用户是否已被注册

                    remote: {

                        url: '/Home/IsUserExist',

                        type: "get",

                        dataType: "json",

                        data: {

                            username: function () {

                                return $("#username").val();

                            }

                        }

                    }

                },

                firstpwd: {

                    required: true,

                    rangelength: [6, 8]

                },

                secondpwd: {

                    required: true,

                    equalTo: "#firstpwd"

                },

                sex: {

                    required: true

                },

                age: {

                    required: true,

                    range: [0, 120]

                },

                email: {

                    required: true,

                    email: true

                },

                purl: {

                    required: true,

                    url: true

                },

                mobile: {

                    required: true,

                    isMobile: true

                },

                afile: {

                    required: true,

                    accept: "xls,doc,rar,zip"

                }

            },

            messages: {

                username: {

                    required: "用户名是必须的",//如果把这条语句注释掉，则username为空时提示的信息按照下面扩展的规定提示“必填字段”

                    minlength: $.format("用户名至少要{0}个字符"),

                    remote: $.format("用户{0}已经被注册")

                },

                firstpwd: {

                    required: "密码是必须的",

                    rangelength: $.format("密码要在{0}-{1}个字符之间")

                },

                secondpwd: {

                    required: "确认密码是必须的",

                    equalTo: "和第一次输入的密码不一致"

                },

                sex: {

                    required: "性别是必须的"

                },

                age: {

                    required: "年龄是必须的",

                    range: $.format("年龄必须介于{0}-{1}之间")

                },

                email: {

                    required: "邮箱是必须的",

                    email: "请输入正确的邮箱地址，如[e-mail]"

                },

                purl: {

                    required: "个人主页是必须的",

                    url: "请输入正确的网址格式，如http://www.baidu.com"

                },

                mobile: {

                    required: "手机是必须的",

                    isMobile: "请正确填写您的电话号码"

                },

                afile: {

                    required: "附件是必须的",

                    accept: "只接收xls,doc,rar,zip格式的文件"

                }

            },

            //onfocusout: false,

            focusInvalid: true,

            //onkeyup: false,

            submitHandler: function (form) {

                alert("提交表单");

            },

            errorClass: "invalid",

            errorPlacement: function (error, element) {

                error.appendTo($(element).parent("td").next("td"))

            },

            highlight: function (element, errorClass) {

                $(element).addClass(errorClass);

            },

            success: function (label) {

                $(label).html("&nbsp").addClass("valid");

            }

        });

        

        //下面是messages的重写，只要上面messages内部元素定义不写required的内容则默认按照下面定义的信息显示

        jQuery.extend(jQuery.validator.messages, {

            required: "必填字段",

            remote: "请修正该字段",

            email: "请输入正确格式的电子邮件",

            url: "请输入合法的网址",

            date: "请输入合法的日期",

            dateISO: "请输入合法的日期 (ISO).",

            number: "请输入合法的数字",

            digits: "只能输入整数",

            creditcard: "请输入合法的信用卡号",

            equalTo: "请再次输入相同的值",

            accept: "请输入拥有合法后缀名的字符串",

            maxlength: jQuery.validator.format("请输入一个长度最多是 {0} 的字符串"),

            minlength: jQuery.validator.format("请输入一个长度最少是 {0} 的字符串"),

            rangelength: jQuery.validator.format("请输入一个长度介于 {0} 和 {1} 之间的字符串"),

            range: jQuery.validator.format("请输入一个介于 {0} 和 {1} 之间的值"),

            max: jQuery.validator.format("请输入一个最大为 {0} 的值"),

            min: jQuery.validator.format("请输入一个最小为 {0} 的值")

        });

    })

</script>

后台：

后台的代码相对比较简单，只要定义一个与前台ajax异步验证对应的处理逻辑即可

public JsonResult IsUserExist()

        {

            string username = Request.QueryString["username"];

            bool flag = false;

            if (username != "yjy")

                flag = true;

            return new JsonResult() { Data = flag, JsonRequestBehavior = JsonRequestBehavior.AllowGet };

        }

此处为测试使用，若在现实开发系统时上面的if (username != "yjy")可能需要改成与数据库的用户列表进行对比判断。

如果你成功了，显示的效果如下图所示（哈哈^_^，祝你成功...）

至此，整个jquery表单验证实例的讲解已结束，这是我个人亲自尝试的一个实例，希望对大家有帮助。