0

登録ページにリアルタイムのフォーム検証を追加しようとしていますが、メール入力だけが正しい出力またはエラー出力を表示しており、ユーザー名もパスワードも表示されていません。過去数時間試してみました何が問題なのですが、コードに原因となるエラーが見つかりません。誰かがエラーを見ることができることを願っています。

フォームコード

 <form id="jform" action="" method="post" enctype="multipart/form-data">
                <div id="modal_content_left">
                Register

                <ul>

                    <li class="required" type="none">

                        <label>

                            <input type="text" class="reg_text tip" name="username" id="username" title="8 - 16 Characters" placeholder="Username*"/>

                        </label>

                        <label>
                             <br />
                            <input type="text" class="reg_text tip" name="email" id="email" title="Get Verified" placeholder="Email*"/>

                        </label>
                        <label>
                            <br />
                            <input type="password" class="reg_text tip" name="password" id="password" title="Min 8 Characters" placeholder="Password*"/>

                        </label>


                        <label>
                            <br />
                            <input type="password" class="reg_text tip" name="cpassword" id="cpassword" title="Min 8 Characters" placeholder="Verify Password*"/>
                        </label>
                    </li>


                </ul></form>

Jクエリコード

// JavaScript Document

$(document).ready(function(){
    jVal = {

            'username' : function() {

            $('body').append('<div id="usernameInfo" class="info"></div>');

            var ele = $('#username');
            var pos = ele.offset();



            var patt = /^(?=.*[a-z].*)\w{8,}$/i;

            if(!patt.test(ele.val())) {
                jVal.errors = true;
                    ele.removeClass('correct').addClass('error');
                    ele.effect("shake", { times:3 }, 50);

            } else {
                    ele.removeClass('error').addClass('correct');
            }
        },




        'email' : function() {

            $('body').append('<div id="emailInfo" class="info"></div>');

            var ele = $('#email');
            var pos = ele.offset();



            var patt = /^.+@.+[.].{2,}$/i;

            if(!patt.test(ele.val())) {
                jVal.errors = true;
                    ele.removeClass('correct').addClass('error');
                    ele.effect("shake", { times:3 }, 50);

            } else {
                    ele.removeClass('error').addClass('correct');
            }
        },

        'password' : function(){

            $('body').append('<div id="passwordInfo" class="info"></div>');


            var ele = $('#password');
            var pos = ele.offset();


            if(ele.val().length < 6) {
                jVal.errors = true;
                    ele.removeClass('correct').addClass('error');
                    ele.effect("shake", { times:3 }, 50);

            } else {
                    ele.removeClass('error').addClass('correct');
            }

        },





    $('#username').change(jVal.username);
    $('#email').change(jVal.email);
    $('#password').change(jVal.password);

    $('input[name="agree_cons"]').change(jVal.agree);
});
4

1 に答える 1

1

コードに問題はありません。jQuery と jQuery UI を含めると機能します。

これが実用的なフィドルです。私が行った唯一の変更は次のとおりです。

  1. jQuery を含める
  2. jQuery UI を含めます。
  3. .correctとの CSS 宣言を追加する.error

これらすべてを独自のコードで実行していることを再確認すると、期待どおりの結果が得られるはずです。

于 2012-05-05T03:30:38.577 に答える