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

添加了“return false”以在出现错误时中断每个循环。

$('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 回答