Übermittlung der jQuery-Formularüberprüfung: Front-End-Überprüfung 2 (Bild, Text + Video)-HTML-Kenntnisse-php.cn

Übermittlung der jQuery-Formularüberprüfung: Front-End-Überprüfung 2 (Bild, Text + Video)

藏色散人

Freigeben： 2018-10-23 10:12:36

Original

4704 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich die spezifische Methode von jQuery zur Implementierung der Formularüberprüfungsübermittlung ausführlich vorgestellt.

Im vorherigen Artikel [Übermittlung der jQuery-Formularüberprüfung: Front-End-Verifizierung 1] haben wir kurz die spezifischen Methodencodes für jQuery aufgelistet, um die Übermittlung der Formularüberprüfung zu implementieren. In diesem Abschnitt wird Ihnen daher die spezifische Methode von jQuery zur Implementierung der Übermittlung der Formularüberprüfung ausführlich vorgestellt.

Die wichtigsten Codebeispiele lauten wie folgt:

<!DOCTYPE>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>jQuery用户注册表单验证代码</title>
    <link href="css/jq22.css" rel="stylesheet" type="text/css"/>
    <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <script language=&#39;javascript&#39; src="js/jq22.js"></script>
</head>
<body>
<div class=&#39;body_main&#39;>

    <div class=&#39;index_box&#39; style=&#39;margin-top:20px;&#39;>
        <div style="position:fixed;color:red;margin:70px 0 0 450px;font-size:16px;Z-index:100;display:block;"
             id="hint"></div>
        <div class=&#39;box_title&#39;>
            <div class=&#39;text_content&#39;>
                <h1>jQuery用户注册表单验证代码</h1>
            </div>
        </div>
        <div class=&#39;box_main&#39;>
            <div id="register" class="register">
                <form id="form" action="check1.php" method="post" onSubmit="return check();">
                    <div id="form_submit" class="form_submit">
                        <div class="fieldset">
                            <div class="field-group">
                                <label class="required title">手机号码</label>
                                <span class="control-group" id="mobile_input">
                <div class="input_add_long_background">
                  <input class="register_input" type="text" id="mobile" name="mobile" maxLength="11" value=""
                         onblur="__changeUserName(&#39;mobile&#39;);">
                </div>
                </span>
                                <label class="tips">仅用于发送服务开通与到期提醒以及紧急故障方便联系到您，绝对保密</label>
                            </div>
                            <div class="field-group">
                                <label class="required title">邮箱</label>
                                <span class="control-group" id="email_input">
                <div class="input_add_long_background">
                  <input class="register_input" type="text" id="email" name="email" maxLength="50" value=""
                         onblur="__changeUserName(&#39;email&#39;);">
                </div>
                </span>
                                <label class="tips">请输入您常用的邮箱</label>
                            </div>
                            <div class="field-group">
                                <label class="required title">设置密码</label>
                                <span class="control-group" id="password1_input">
                <div class="input_add_long_background">
                  <input class="register_input" type="password" id="password1" name="password1" maxLength="20" value=""
                         onblur="checkPwd1(this.value);"/>
                </div>

                </span>
                                <label class="tips">请使用6~20个英文字母（区分大小写）、符号或数字</label>
                            </div>
                            <div class="field-group">
                                <label class="required title">确认密码</label>
                                <span class="control-group" id="password2_input">
                <div class="input_add_long_background">
                  <input class="register_input" type="password" id="password2" name="password2" maxLength="20" value=""
                         onblur="checkPwd2(this.value);"/>
                </div>

                </span>
                                <label class="tips">请输入确认密码，要和上面的密码一致</label>
                            </div>
                        </div>
                    </div>
                    <div id="div_submit" class="div_submit">
                        <div class=&#39;div_submit_button&#39;>
                            <input id="submit" type="submit" value="注册" class=&#39;button_button disabled&#39;>
                        </div>
                    </div>
                </form>
            </div>
            <script type="text/javascript">
                function __changeUserName(of) {
                    var username = $(&#39;#&#39; + of).val();
                    if (of == &#39;email&#39;) {
                        if (username.search(/^[\w\.+-]+@[\w\.+-]+$/) == -1) {
                            showTooltips(&#39;email_input&#39;, &#39;请输入正确的Email地址&#39;);
                            return;
                        }
                    }
                    else {
                        if (username == &#39;&#39; || !isMobilePhone(username)) {
                            showTooltips(&#39;mobile_input&#39;, &#39;请输入正确的手机号码&#39;);
                            return;
                        }
                    }
                }

                function checkPwd1(pwd1) {
                    if (pwd1.search(/^.{6,20}$/) == -1) {
                        showTooltips(&#39;password1_input&#39;, &#39;密码为空或位数太少&#39;);
                    } else {
                        hideTooltips(&#39;password1_input&#39;);
                    }
                }

                function checkPwd2(pwd2) {
                    var pas1 = $(&#39;#password1&#39;).val();
                    if (pwd2.search(/^.{6,20}$/) == -1) {
                        showTooltips(&#39;password2_input&#39;, &#39;密码为空或位数太少&#39;);
                    }
                    if (pwd2 != pas1) {
                        showTooltips(&#39;password2_input&#39;, &#39;两次密码不一致&#39;);
                    }
                }

                function check() {
                    hideAllTooltips();
                    var ckh_result = true;
                    // if ($(&#39;#email&#39;).val() == &#39;&#39; || !isEmail($(&#39;#email&#39;).val())) {
                    //     showTooltips(&#39;email_input&#39;, &#39;请输入正确的Email地址&#39;);
                    //     ckh_result = false;
                    // }
                    if ($(&#39;#password1&#39;).val() == &#39;&#39;) {
                        showTooltips(&#39;password1_input&#39;, &#39;密码不能为空&#39;);
                        ckh_result = false;
                    }
                    if ($(&#39;#password2&#39;).val() == &#39;&#39;) {
                        showTooltips(&#39;password2_input&#39;, &#39;确认密码不能为空&#39;);
                        ckh_result = false;
                    }
                    if ($(&#39;#password2&#39;).val() != $(&#39;#password1&#39;).val()) {
                        showTooltips(&#39;password2_input&#39;, &#39;两次密码不一致&#39;);
                        ckh_result = false;
                    }
                    if ($(&#39;#mobile&#39;).val() == &#39;&#39; || !isMobilePhone($(&#39;#mobile&#39;).val())) {
                        showTooltips(&#39;mobile_input&#39;, &#39;手机号码不正确&#39;);
                        ckh_result = false;
                    }

                    return ckh_result;
                }

                function isMobilePhone(value) {
                    if (value.search(/^(\+\d{2,3})?\d{11}$/) == -1) {
                        return false;
                    }
                    else
                        return true;
                }

                function isEmail(value) {
                    if (value.search(/^[\w\.+-]+@[\w\.+-]+$/) == -1) {
                        return false;
                    }
                    else
                        return true;
                }
            </script>
        </div>
        <div class=&#39;box_bottom&#39;></div>
    </div>
</div>

</body>
</html>

Nach dem Login kopieren

Im obigen Code haben wir einfach ein Formular geschrieben, um die Front-End-Daten an check1 zu senden. php, einreichen Die Methode ist post, und dem Formular wird ein Klickereignis übergeben.

Wenn wir auf „Senden“ klicken, wird eine Reihe von Informationsbeurteilungen vorgenommen. Und wenn wir nicht klicken, um uns zu registrieren, das heißt, das Klickereignis wird nicht ausgelöst, wird auch ein Urteil gefällt.

Zum Beispiel die Methode __changeUserName im Code. Bei dieser Methode ermitteln wir zunächst mithilfe regulärer Ausdrücke, ob das E-Mail-Format korrekt ist und ob die Mobiltelefonnummer korrekt ist. Und stellen Sie in den Methoden checkPwd1 und checkPwd2 fest, ob das Passwort die Anforderungen erfüllt und mit dem ersten Passwort übereinstimmt. Bei diesen Methoden handelt es sich ausschließlich um Überprüfungen, die durchgeführt werden, wenn nicht auf die Registrierungsschaltfläche geklickt wird.

Natürlich reichen diese Beurteilungen nicht aus, daher müssen wir eine Überprüfung schreiben, die beim Klicken zur Registrierung erfolgt, wie z. B. die Prüfmethode im obigen Code, in der wir jedes Feld beurteilen ( Die in den Hintergrundfeldern erforderlichen Felder müssen überprüft werden.

Zusätzlich zur oben genannten Verifizierungsmethode des Klickens zum Registrieren können wir auch ein Ereignis an die Schaltfläche zum Klicken zum Registrieren binden, um die Verifizierung zu ermitteln. Ich werde hier nicht auf Details eingehen.

Die beteiligten JS- und CSS-Codes finden Sie im vorherigen Artikel [jQuery-Formularüberprüfung: Front-End-Überprüfung eins ].

In diesem Artikel geht es um die jQuery-Implementierung der Formularüberprüfung . Ich hoffe, dass er Freunden in Not hilfreich sein wird!

Wenn Sie mehr über Frontend-bezogenes Wissen erfahren möchten, können Sie der chinesischen PHP-Website jQuery-Video-Tutorial, JavaScript-Video-Tutorial, Bootstrap-TutorialWarten Sie auf verwandte Video-Tutorials, heißen Sie alle willkommen, auf die Sie sich beziehen und die Sie lernen können!

Das obige ist der detaillierte Inhalt vonÜbermittlung der jQuery-Formularüberprüfung: Front-End-Überprüfung 2 (Bild, Text + Video). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!