JQuery-Formularvalidierungs-Plugin-js-Tutorial-php.cn

jqueryFormularvalidierung Dieses Plug-in eignet sich sehr gut für den Einsatz in unseren eigenen Projekten. Wer sich für jquery interessiert, kann es auch studieren und lernenjquery.
Implementierungsdemonstration:
JQuery-Formularvalidierungs-Plugin
Codedemonstration:
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>PHP中文网--注册页面</title>
        <style>
            * {
                padding: 0;
                margin: 0;
            }
             
            form {
                width: 570px;
                height: 300px;
                margin: 100px auto;
            }
             
            label {
                width: 64px;
                float: left;
                clear: left;
                height: 36px;
                line-height: 36px;
                margin-top: 10px;
            }
             
            input {
                width: 300px;
                height: 36px;
                line-height: 36px;
                margin-top: 10px;
                text-indent: 8px;
                font-size: 16px;
                font-family: "微软雅黑";
                border: 1px solid #ccc;
                float: left;
            }
             
            #sub {
                width: 302px;
                height: 40px;
                border: 1px solid #ccc;
                background: #888;
                color: #fff;
                font-size: 18px;
                text-indent: 0;
            }
             
            .spa {
                height: 36px;
                line-height: 36px;
                width: 204px;
                display: inline-block;
                float: left;
                font-size: 12px;
                color: #BD362F;
                text-indent: 10px;
                margin-top: 10px;
            }
        </style>
    </head>
 
    <body>
        <form action="" method="post">
            <label id="name">姓 名：</label><input type="text" name="username" id="username" value="" placeholder="请输入姓名" /><span class="spa spa1"></span><br />
            <label id="phone">手机号：</label><input type="text" name="userphone" id="userphone" value="" placeholder="请输入手机号" /><span class="spa spa2"></span><br />
            <label id="address">地 址：</label><input type="text" name="useraddress" id="useraddress" value="" placeholder="请输入地址" /><span class="spa spa3"></span><br />
            <label>    </label><input type="submit" value="注册" id="sub" />
        </form>
        <script src="http://code.jquery.com/jquery-1.4.1.js"></script>
        <script type="text/javascript">
            window.onload = function() {
                    $("#username").focus()
                }
                /************************  失焦判断  **********************************/
            $("input").blur(function() {
                    $(".spa").css("color", "#BD362F")
                    if($(this).is("#username")) { //姓名判断
                        var na = /^[\u4E00-\u9FA5]{2,4}$/
                        if($("#username").val() != "") {
                            if(!(na.test($("#username").val()))) {
                                $(".spa1").text("请输入2-4个汉字");
                                $(this).css("border", "1px solid #BD362F")
                                return false;
                            } else if(na) {
                                $(".spa1").text("");
                                return true;
                            }
                        } else {
                            $(".spa1").text("");
                        }
                    }
                    if($(this).is("#userphone")) { //手机号判断
                        var ph = /^1[3|5|7|8|][0-9]{9}$/
                        if($("#userphone").val() != "") {
                            if(!(ph.test($("#userphone").val()))) {
                                $(".spa2").text("请输入正确手机号");
                                $(this).css("border", "1px solid #BD362F")
                                return false;
                            } else if(ph) {
                                $(".spa2").text("");
                                return true;
                            }
                        } else {
                            $(".spa2").text("");
                        }
                    }
 
                    if($(this).is("#useraddress")) { //地址判断
                        var ad = /^(?=.*?[\u4E00-\u9FA5])[\dA-Za-z\u4E00-\u9FA5]{8,32}/;
                        if($("#useraddress").val() != "") {
                            if(!(ad.test($("#useraddress").val()))) {
                                $(".spa3").text("请输入正确地址");
                                $(this).css("border", "1px solid #BD362F")
                                return false;
                            } else if(ad) {
                                $(".spa3").text("");
                                return true;
                            }
                        } else {
                            $(".spa3").text("");
                        }
                    }
                })
                /********************** 聚焦提示 ************************/
            $("input").focus(function() {
                    if($(this).is("#username")) {
                        $(".spa1").text("四个汉字").css("color", "#aaa")
                        $(this).css("border", "1px solid #aaa")
                    }
                    if($(this).is("#userphone")) {
                        $(".spa2").text("11位手机号码").css("color", "#aaa")
                        $(this).css("border", "1px solid #aaa")
                    }
                    if($(this).is("#useraddress")) {
                        $(".spa3").text("最少8个字符（汉字、字母和数字）").css("color", "#aaa")
                        $(this).css("border", "1px solid #aaa")
                    }
                })
                /*********************** 提交验证 ***************************/
            $("#sub").click(function() {
                var na = /^[\u4E00-\u9FA5]{2,4}$/; //姓名正则
                var ph = /^1[3|5|7|8|][0-9]{9}$/; //手机号正则
                var ad = /^(?=.*?[\u4E00-\u9FA5])[\dA-Za-z\u4E00-\u9FA5]{8,32}/; //地址正则
                if(na.test($("#username").val()) && ph.test($("#userphone").val()) && ad.test($("#useraddress").val())) {
                    return true;
                } else {
                    if($("#username").val() == "") {
                        $(".spa1").text(&#39;请你填写用户名&#39;)
                    }
                    if($("#userphone").val() == "") {
                        $(".spa2").text(&#39;请你填写手机号&#39;)
                    }
                    if($("#useraddress").val() == "") {
                        $(".spa3").text(&#39;请你填写地址&#39;)
                    }
                    return false;
                }
            })
        </script>
    </body>
</html>
Nach dem Login kopieren
Das war's Für den Quellcode des JQuery-Formularvalidierungs-Plug-Ins können Sie bei Interesse auf die PHP-Chinese-Website gehen, um nach mehr verwandtem Wissen zu suchen!
Verwandte Empfehlungen:
jquery implementiert PC-seitige Schiebeüberprüfung
jquery-Titelauswahlanimation
Quellcode zum Entsperren von JQuery-Gesten
Das obige ist der detaillierte Inhalt vonJQuery-Formularvalidierungs-Plugin. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!