Question

嗨，我是一名学生程序员，我正在编写和使用我研究过的代码，为我的注册表单构建一层客户端验证，因为这是我第一次这样做，我不能相当开始工作。如果有比我更多经验的人想快速查看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>

Answer 1

切换案例类型文本..在这里什么都不做......反正为什么你不使用jquery验证插件..

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

易于使用.....

Answer 2

添加“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将始终返回集合中最后一个元素的验证结果。

带有HTML的jQuery表单验证代码

2 个答案: