溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》

jQuery驗(yàn)證插件的例子( 表單驗(yàn)證vs2013)

發(fā)布時(shí)間:2020-07-04 08:32:18 來(lái)源:網(wǎng)絡(luò) 閱讀:406 作者:趙玉德 欄目:web開(kāi)發(fā)

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

2 使用范圍:企業(yè)級(jí)別的系統(tǒng)開(kāi)發(fā)(用戶(hù)數(shù)目幾十到幾千人也行),統(tǒng)一安裝IE8以上的瀏覽器即可;

3 如果是企業(yè)級(jí)宣傳網(wǎng)站,則不能使用;


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({


                //驗(yàn)證成功后,提交數(shù)據(jù),使用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("注冊(cè)失敗!");

                            }

                        },

                        error: function () {

                            alert("ajax服務(wù)器錯(cuò)誤!");

                        }

                    });

                },

                //驗(yàn)證成功,添加一個(gè)對(duì)號(hào)圖片

                success: function (lable) {


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

                },

                //驗(yàn)證規(guī)則

                rules: {

                    userName: {

                        required: true,//不為空

                        remote: "Ajax.aspx?action=dan"

                    },

                    pwd: {

                        required: true,//不為空

                        minlength: "6",

                        

                    },

                    confirmPwd: {

                        required: true,

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

                    },

                    email: {

                        required: true,

                        email: true

                    },

                    tsPwd: {

                        required: true,

                        geshi:true

                    }

                },

                messages: {

                    userName: {

                        required: '<span class="errorMes">用戶(hù)名不能為空!</span>',

                        remote: '<span class="errorMes">用戶(hù)名已存在,請(qǐng)重新輸入!</span>',

                    },

                    pwd: {

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

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

                       },

                    confirmPwd: {

                        required: '<span class="errorMes">確認(rèn)密碼不能為空!</span>',

                        equalTo: '<span class="errorMes">密碼不一致,請(qǐng)重新輸入!</span>'

                    },

                    email: {

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

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

                    },

                    tsPwd: {

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

                    }

                }

            });


            ////單獨(dú)添加

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

            //    required: true,

            //    geshi: true,

            //    messages: {

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

            //    }

            //});


            //自定義驗(yàn)證規(guī)則

            $.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));

            },'必須是數(shù)字和字母或下劃線(xiàn)的組合!');

        });

        

    </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>用戶(hù)名:<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>確認(rèn)密碼:<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
向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI