0

こんにちは私は学生プログラマーです。登録フォームにクライアント側の検証のレイヤーを構築するために研究したコードを作成して使用しています。これを行うのはこれが初めてなので、完全に取得することはできません。働くために。私よりも経験豊富な人がHTMLとJavascriptをすばやく確認したい場合は、フォームフィールドに書き込んで、作成した検証コードを送信しても何も起こらない理由を教えてくれるといいのですが。 。

私が学び続けるのを手伝ってくれてありがとう。

        <div class="content">
            <div id="form_wrapper" class="form_wrapper">
                <form class="register active" action="regprocess.php" method = "post">
                    <h3 class="font">REGISTER</h3>
                    <div class="column">
                        <div>
                            <label for="t1">Firstname:</label>
                            <input type="text" id="t1" name="firstname" class="required" />
                            <span class="errorMessage"id="errormessage_firstname">This is an error</span>
                        </div>
                        <div>
                            <label for="t2">Username:</label>
                            <input type="text" id="t2" name="username" class="required" />
                            <span class="errorMessage"id="errormessage_username">This is an error</span>
                        </div>
                        <div>
                            <label for="t3">Email:</label>
                            <input type="text" id="t3" name="email" class="required"/>
                            <span class="errorMessage"id="errormessage_email">This is an error, please give a valid email address.</span>
                        </div>
                    </div>
                    <div class="column">
                        <div>
                            <label for="t4">Lastname:</label>
                            <input type="text" id="t4" name="lastname" class="required"/>
                            <span class="errorMessage"id="errormessage_lastname">This is an error</span>
                        </div>
                        <div>
                            <label for="p1">Password:</label>
                            <input type="password" id="p1"name ="pass" class="required" />
                            <span class="errorMessage"id="errormessage_pass">This is an error</span>
                        </div>
                        <div>
                            <label for="p1">Re-enter Password:</label>
                            <input type="password" id="p2" name="pass" class ="required"/>
                            <span class="errorMessage" id="errormessage_pass">This is an error</span>
                        </div>
                    </div>
                    <div class="bottom">
                        <div class="remember">

                        </div>
                        <input type="submit" value="Register" />
                        <a href="index.html" rel="login" class="linkform">You have an account already? Log in here</a>
                        <div class="clear"></div>
                    </div>
                </form>
                <script type="text/javascript">

                    $('form').submit(function(event){


                        var isErrorFree = true;
                        //iterate through required form elements, check if valid
                        $('input.required',this).each(function(){
                            if(validateElement.isValid(this) == false){
                                isErrorFree = false;
                            };
                        });
                    return isErrorFree;
                    });

                    var validateElement = {

                        isValid:function(element){
                            var isValid = true;
                            var $element = $(element);
                            var id = $element.attr('id');
                            var name = $element.attr('name')
                            var value = $element.val();

                            var type = $element[0].type.toLowerCase();

                            switch(type){
                                case 'text':
                                case 'password':
                                if (value.length == 0 ||
                                    value.replace(/\s/g,'').length == 0){ isValid = false;}
                                    break;
                                    function emailReg2(){
                                    var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
                                    if(!emailReg.test(email)){
                                        isValid = false;
                                        var method =  isValid ? 'removeClass' : 'addClass';
                                    };
                                    var method =  isValid ? 'removeClass' : 'addClass';

                                    $('#errorMessage_' + name)[method]('showErrorMessage');
                                    $('label[for="' + id + '"]')[method]('error');

                                    return isValid;


                            }

                    }
                    }
                    };

                </script>
4

2 に答える 2

0

エラーが発生したときに各ループを中断する「returnfalse」を追加しました。

$('form').submit(function(event){
    var isErrorFree = true;
    //iterate through required form elements, check if valid
    $('input.required',this).each(function(){
        if(validateElement.isValid(this) == false){
          isErrorFree = false;
          return false;
        };
    });
    return isErrorFree;
});

各ループは、必要な入力要素のセット全体を実行し、反復ごとにisErrorFree変数を更新します。検証エラーが発生したら、すぐにループを終了する必要があります。それ以外の場合、isErrorFreeは常にセットの最後の要素の検証結果を返します。

于 2012-09-14T15:56:16.943 に答える
0

タイプテキストの大文字と小文字を切り替えます..ここでは何もしません...とにかくjquery検証プラグインを使用しないのはなぜですか..

http://bassistance.de/jquery-plugins/jquery-plugin-validation/

使いやすい.....

于 2012-09-14T15:27:05.993 に答える