recherche

Maison >programmation quotidienne >connaissance HTML >Soumission de la vérification du formulaire jQuery : vérification frontale 2 (image, texte + vidéo)

Soumission de la vérification du formulaire jQuery : vérification frontale 2 (image, texte + vidéo)

藏色散人
藏色散人original
2018-10-23 10:12:364706parcourir

Cet article présente principalement en détail la méthode spécifique de jQuery pour implémenter la soumission de vérification de formulaire .

Dans l'article précédent [Soumission de vérification de formulaire jQuery : vérification frontale 1], nous avons brièvement répertorié les codes de méthode spécifiques permettant à jQuery d'implémenter la soumission de vérification de formulaire. Cette section vous présentera donc en détail la méthode spécifique de jQuery pour implémenter la soumission de vérification de formulaire.

Les principaux exemples de code sont les suivants : 

<!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>

Dans le code ci-dessus, nous avons simplement écrit un formulaire pour soumettre les données frontales à check1.php , la méthode de soumission est post et un événement de clic est donné au formulaire.

Lorsque nous cliquons sur Soumettre, une série de jugements d'information sera faite. Et lorsque nous ne cliquons pas pour nous inscrire, c'est-à-dire que l'événement de clic n'est pas déclenché, il y aura également un jugement.

Par exemple, la méthode __changeUserName dans le code. Dans cette méthode, nous utilisons d'abord des expressions régulières pour déterminer si le format de l'e-mail est correct et si le numéro de téléphone portable est correct. Et dans les méthodes checkPwd1 et checkPwd2, déterminez si le mot de passe répond aux exigences et est identique au premier mot de passe. Ces méthodes sont toutes des vérifications qui se produisent lorsque le bouton d'inscription n'est pas cliqué.

Bien sûr, ces jugements ne suffisent pas, nous devons donc écrire une vérification qui se produira lorsque vous cliquerez pour vous inscrire, comme la méthode de vérification dans le code ci-dessus, dans laquelle nous jugeons chaque champ ( requis dans les champs d’arrière-plan doivent être vérifiés).

En plus de la méthode de vérification ci-dessus consistant à cliquer pour s'inscrire, nous pouvons également lier un événement au bouton de cliquer pour s'inscrire pour déterminer la vérification. Je n’entrerai pas dans les détails ici.

Les codes js et css impliqués peuvent être trouvés dans l'article précédent [Soumission de vérification du formulaire jQuery : première vérification frontale ].

Cet article concerne la méthode jQuery de mise en œuvre de la soumission de vérification de formulaire J'espère qu'il sera utile aux amis dans le besoin !

Si vous souhaitez en savoir plus sur les connaissances liées au front-end, vous pouvez suivre le site Web PHP chinois Tutoriel vidéo jQuery, Tutoriel vidéo JavaScript, Tutoriel BootstrapAttendez les didacticiels vidéo associés, tout le monde est invité à s'y référer et à apprendre !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

php JavaScript jquery css 正则表达式 bootstrap 表单验证 JS 事件
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Soumission de la vérification du formulaire jQuery : vérification frontale (image, texte + vidéo)Article suivant：Soumission de la vérification du formulaire jQuery : vérification frontale (image, texte + vidéo)

Articles Liés

Voir plus