Javascript实时注册错误检查和实时调试不起作用?

时间:2013-07-22 11:14:48

标签: javascript jquery

基本上在这个注册系统中我想检查是否:

  • 所有字段都已填满。

  • 用户名长度检查。

  • 密码长度检查。

  • 检查电子邮件是否有效。

  • 检查是否未收到电子邮件。

  • 检查是否未使用用户名。

  • 检查密码是否等于repassword。

问题:

第一步没问题,但在我填满所有输入后,相同的错误加速,但输入周围没有2px红色边框。

如果我不填写所有内容,我会得到相同的错误+红色边框。

基本上我想调试/排除当前系统正在执行的操作,并使用超时来测试localhost是否正常工作。

有我的代码:

$("#center").on('click', function(e) {
            // Prevent submit.
            e.preventDefault();             
            /**
            * Variables
            **/

            // Errors div block
            var errors      = $(".errors");

            // Username input
            var username    = $("#username");

            // Password input
            var password    = $("#password");

            // Re-password input
            var repassword  = $("#repassword");

            // Email input
            var email       = $("#email");

            // Display name input
            var display     = $("#display");

            // Validating all forms
            var incomplete  = $(':input', this.form).filter(function() { return $(this).val() == ''; });

            // For submit, need $this var
            var self        = this;


            /************************************/

            /**
            * Booleans
            **/

            var inputsAreFilled;
            var validateAccount;
            var validatedUsername;
            var validatedEmail;

            /***
            * SYSTEM START
            **/ 

            validating("Validating Inputs...");
            setTimeout(function() {
                $(':input', this.form).each(function(i, ele) {
                    if (ele.value.trim() == "") {
                        ele.style.border = '2px solid red';
                        parseError("One of the fields are empty.");
                        $("#close").click(function() {
                            errors.html("");
                            errors.fadeOut("slow");
                        });     
                        restore();
                    }
                    else
                    {
                        $(this).removeAttr('style');
                    }               
                });

                if (!incomplete.length) {
                    inputsAreFilled = true;
                } else {
                    inputsAreFilled = false;
                }
            }, 1000);
            if (inputsAreFilled) {
                validating("Validating Data...");
                setTimeout(function() {
                    // Username length
                    if (username.val().length() < 3) {
                        parseError("Your username is too short.");
                        username.css("border", "solid 2px red");
                        validateAccount = false;
                        restore();
                        $("#close").click(function() {
                            errors.html("");
                            errors.fadeOut("slow");
                        });                             
                    } else if (username.val().length > 20) {
                        parseError("Your username is too long.");   
                        username.css("border", "solid 2px red");
                        validateAccount = false;
                        restore();
                        $("#close").click(function() {
                            errors.html("");
                            errors.fadeOut("slow");
                        });                             
                    } else if (password.val().length < 5) {
                        parseError("Your password is too short.");
                        password.css("border", "solid 2px red");
                        validateAccount = false;            
                        restore();  
                        $("#close").click(function() {
                            errors.html("");
                            errors.fadeOut("slow");
                        });                             
                    } else if (password.val().length > 20) {
                        parseError("Your password is too long.");
                        password.css("border", "solid 2px red");
                        validateAccount = false;    
                        restore();
                        $("#close").click(function() {
                            errors.html("");
                            errors.fadeOut("slow");
                        });                             
                    } else if (display.val().length < 3) {
                        parseError("Your display name is too short.");
                        display.css("border", "solid 2px red");
                        validateAccount = false;    
                        restore();
                        $("#close").click(function() {
                            errors.html("");
                            errors.fadeOut("slow");
                        });                             
                    } else if (display.val().length > 20) {
                        parseError("Your display name is too long.");
                        display.css("border", "solid 2px red");
                        validateAccount = false;    
                        restore();
                        $("#close").click(function() {
                            errors.html("");
                            errors.fadeOut("slow");
                        });                             
                    } else if (!isValidEmailAddress(email.val())) {
                        parseError("Your email address is not valid");
                        email.css("border", "solid 2px red");
                        validateAccount = false;
                        restore();  
                        $("#close").click(function() {
                            errors.html("");
                            errors.fadeOut("slow");
                        });                             
                    } else if (password.val() != repassword.val()) {
                        parseError("Your passwords are not equal.");
                        password.css("border", "solid 2px red");
                        repassword.css("border", "solid 2px red");
                        validateAccount = false;
                        restore();
                        $("#close").click(function() {
                            errors.html("");
                            errors.fadeOut("slow");
                        });                             
                    } else {
                        validateAccount = true;
                    }
                }, 1000);

                if (validateAccount) {
                    validating("Checking username...");
                    setTimeout(function() {
                        validateUsername(username.val()).done(function(data) {
                            if ($.trim(data) == 1) {
                                validatedUsername = false;
                                parseError("That username is already in use.");
                                username.css("border", "solid 2px red");
                                restore();
                                $("#close").click(function() {
                                    errors.html("");
                                    errors.fadeOut("slow");
                                });                                     
                            } else {
                                validatedUsername = true;
                            }
                        });
                    }, 1000);

                    if (validatedUsername) {
                        validating("Checking email...");    
                        setTimeout(function() {
                            validateEmail(email.val()).done(function(data) {
                                if ($.trim(data) == 1) {
                                    validatedEmail = false;
                                    parseError("That email is already in use.");
                                    email.css("border", "solid 2px red");
                                    restore();
                                    $("#close").click(function() {
                                        errors.html("");
                                        errors.fadeOut("slow");
                                    });                                         
                                } else {
                                    validatedEmail = true;
                                }
                            });     
                        }, 1000);
                    }
                    else
                    {
                        validating("Global Check - Please wait");
                        setTimeout(function() {
                            if (validateAccount && validatedUsername && validatedEmail && inputsAreFilled)
                            {
                                validating("Done - Redirecting...");
                                self.form.submit();
                            }
                            else
                            {
                                parseError("An error has occured!");
                                $("#close").click(function() {
                                    errors.html("");
                                    errors.fadeOut("slow");
                                });                                     
                            }
                        }, 1000);
                    }
                }
            }
        });

我的职能:

    function isValidEmailAddress(emailAddress) {
        var pattern = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i);
        return pattern.test(emailAddress);
    }

    function restore() {
        $("#center").attr('value','Continue');
        $(".displaying_form").css("opacity", "1.0");        
    }

    function parseError(message) {
        $(".errors").html(message + "<span id='close'>X</span>");
        $(".errors").fadeIn();      
    }

    function validating(message) {
        $("#center").attr('value', message);
        $(".displaying_form").css("opacity", "0.6");
        $("#center").css("cursor", "default");      
    }

    function validateUsername(username, type) {
        return $.post("js/ajax/ajax.php", { validateUsername : 1 });
    }

    function validateEmail(username, type) {
        return $.post("js/ajax/ajax.php", { validateEmail : 1 });
    }

基本上,它没有进入下一步,它坚持第一步。 填写完所有输入后,它会给出错误:“其中一个字段为空。”

为什么这样做?为什么不继续?

0 个答案:

没有答案