jQuery验证插件的例子( 表单验证vs2013)
更新:HHH   时间:2023-1-7


1 插件支持IE8及以上的版本,不再支持IE6、7;

2 使用范围:企业级别的系统开发(用户数目几十到几千人也行),统一安装IE8以上的浏览器即可;

3 如果是企业级宣传网站,则不能使用;


html:

<script src="js/jquery-1.11.3.js"></script>

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

    <!--<script src="js/jquery-migrate-1.2.1.js"></script>-->

    <script type="text/javascript">

        $(function () {

            $("#reg").validate({


                //验证成功后,提交数据,使用AJAX提交

                submitHandler: function (form) {

                    $.ajax({

                        type: "post",

                        url: "Submit.aspx",

                        data: $(form).serialize(),

                        success: function (response, status, xhr) {

                            if (response == "ok") {

                                window.location = "HtmlPage2.html";

                            }

                            else {

                                alert("注册失败!");

                            }

                        },

                        error: function () {

                            alert("ajax服务器错误!");

                        }

                    });

                },

                //验证成功,添加一个对号图片

                success: function (lable) {


                    lable.html('<img src="../img/aa.png" alt="" />');

                },

                //验证规则

                rules: {

                    userName: {

                        required: true,//不为空

                        remote: "Ajax.aspx?action=dan"

                    },

                    pwd: {

                        required: true,//不为空

                        minlength: "6",

                        

                    },

                    confirmPwd: {

                        required: true,

                        equalTo: "#userPwd"//和密码是否相等

                    },

                    email: {

                        required: true,

                        email: true

                    },

                    tsPwd: {

                        required: true,

                        geshi:true

                    }

                },

                messages: {

                    userName: {

                        required: '<span class="errorMes">用户名不能为空!</span>',

                        remote: '<span class="errorMes">用户名已存在,请重新输入!</span>',

                    },

                    pwd: {

                        required: '<span class="errorMes">密码不能为空!</span>',

                        minlength: jQuery.format('<span class="errorMes">密码不能少于{0}位!</span>'),

                       },

                    confirmPwd: {

                        required: '<span class="errorMes">确认密码不能为空!</span>',

                        equalTo: '<span class="errorMes">密码不一致,请重新输入!</span>'

                    },

                    email: {

                        required: '<span class="errorMes">邮箱不能为空!</span>',

                        email: '<span class="errorMes">邮箱格式不正确!</span>'

                    },

                    tsPwd: {

                        required: '<span class="errorMes">不能为空!</span>',

                    }

                }

            });


            ////单独添加

            //$("#tsPwd").rules("add", {

            //    required: true,

            //    geshi: true,

            //    messages: {

            //        required: '<span class="errorMes">不能为空!</span>',

            //    }

            //});


            //自定义验证规则

            $.validator.addMethod("geshi", function (value,element) {

                var reg = /^((\w*\d\w*[a-z]\w*)|(\w*[a-z]\w*\d\w*))$/i;

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

            },'必须是数字和字母或下划线的组合!');

        });

        

    </script>

    <style type="text/css">

        .star, .errorMes {

            color: red;

            font-weight: bold;

        }

    </style>

</head>

<body>

    <form  id="reg" >

        <input type="hidden" name="action" value="ChaJianVal" />

        <p>用户名:<input id="userName" type="text" name="userName" /><label id="isExist"></label><span class="star">*</span></p>

        <p>密码:<input id="userPwd" type="text" name="pwd" /><span class="star">*</span></p>

        <p>确认密码:<input type="text" name="confirmPwd" /><span class="star">*</span></p>

        <p>邮箱:<input type="text" name="email" /><span class="star" >*</span></p>

        <p>特殊密码:<input type="text" name="tsPwd" id="tsPwd" /><span class="star">*</span></p>

        <p><input id="sub" type="submit" value="提交" /></p>


    </form>

</body>


附件:http://down.51cto.com/data/2367177
返回web开发教程...