ホームページ > 記事 > 毎日のプログラミング > jQuery フォーム検証送信: フロントエンド検証 2 (画像、テキスト + ビデオ)

jQuery フォーム検証送信: フロントエンド検証 2 (画像、テキスト + ビデオ)

藏色散人オリジナル: 2018-10-23 10:12:364650ブラウズ

この記事では主にjQueryによるフォーム検証送信を実装するための具体的な方法を詳しく紹介します。

前の記事 [jQuery フォーム検証の送信: フロントエンド検証 1 つ] では、フォーム検証の送信を実装するための jQuery の具体的なメソッドコードを簡単にリストしました。そこでこのセクションでは、フォーム検証送信を実装するための jQuery の具体的な方法を詳しく紹介します。

主なコード例は次のとおりです。

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

上記のコードでは、フロントエンドデータを check1 に送信するフォームを作成しただけです。 phpとsubmitメソッドはpostで、フォームにクリックイベントを与えます。

送信をクリックすると、一連の情報判断が行われます。また、クリックして登録しない場合、つまりクリックイベントがトリガーされない場合にも判定が行われます。

コード内の __changeUserName メソッドなど、このメソッドでは、まず正規表現を使用して、電子メールの形式が正しいかどうか、および携帯電話番号が正しいかどうかを判断します。そして、checkPwd1 メソッドと checkPwd2 メソッドで、パスワードが要件を満たしているか、最初のパスワードと同じであるかどうかを判断します。これらの方法はすべて、登録ボタンがクリックされなかった場合に行われる検証です。

もちろん、これらの判定だけでは十分ではないので、上記のコードのチェックメソッドのように、クリックして登録する際に各フィールドを判定する検証を記述する必要があります(バックグラウンドで必須) フィールドを確認する必要があります)。

上記のクリック登録の検証方法に加えて、クリック登録ボタンにイベントをバインドして検証を決定することもできます。ここでは詳細には触れません。

関連する js および css コードはすべて前の記事 [

jQuery フォーム検証の送信: フロントエンド検証 1] に記載されているので、必要な方は参照してください。この記事は、

jQuery のフォーム検証と送信の実装方法についての記事です。

困っている友人の役に立てば幸いです。
フロントエンド関連の知識について詳しく知りたい場合は、PHP 中国語 Web サイト

jQuery ビデオチュートリアル

、JavaScript ビデオチュートリアル、# を参照してください。 ##ブートストラップチュートリアル関連するビデオチュートリアルをお待ちください。参照して学習する皆さんを歓迎します!

以上がjQuery フォーム検証送信: フロントエンド検証 2 (画像、テキスト + ビデオ)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

php JavaScript jquery css 正则表达式 bootstrap 表单验证 JS 事件

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：jQuery フォーム検証送信: フロントエンド検証 1 (画像、テキスト + ビデオ)次の記事：jQuery フォーム検証送信: フロントエンド検証 1 (画像、テキスト + ビデオ)

続きを見る