Question

我创建了此表单验证脚本，其中的“有效”对象包含具有布尔值的属性。首先，代码循环遍历表单中的每个必需元素，并执行两种类型的常规检查。 1.元素是否具有必填属性？如果是这样，它是否有价值？ 2.值是否与type属性匹配？例如，电子邮件输入中是否包含电子邮件地址？一旦执行了常规检查，脚本便进行一些检查，这些检查适用于表单上的各个元素。

跟踪有效元素为了跟踪错误，将创建一个名为va1id的对象。随着代码循环遍历执行通用检查的每个元素，将为每个元素的va1id对象添加一个属性： •属性名称是其id属性的值。 •该值为布尔值。每当在元素上发现错误时，该值就会设置为fa1se。

我遇到的问题是一个错误，提示“ TypeError：validateType未定义”。我该怎么办？

<!DOCTYPE html>
<html>
    <head></head>

    <body>

                <form action="new_facebook.html" method="get" class="form2" novalidate>

                    <span id = "surnameError" class = "hidden">what is your first name</span>
                    <input type="text" name="first_name" placeholder= "first name"  class="sign_up all names" id = "first_name" required/>

                    <span id = "surnameError" class = "hidden">what is your surname</span>
                    <input type="text" name="Surname" placeholder="Surname"  class="sign_up all names" id = "surname" required/><br/>


                    <span id = "emailError" class = "hidden">email address</span>
                    <input type="email" name="mobile_number_or_email_address" placeholder="email address"  class="sign_up2 all" id= "mobile_number_or_email_address" class = "hidden" required /><br/>

                    <span id = "passwordError" class = "hidden">password</span>
                    <input type="password" name="password" placeholder="new password"  class="sign_up2 all" id = "password" required />
                    <br/><br/>

                    <input type="submit" name="submit" value="Create Account" id="submit"/>

                </form>

        <script src = "jquery-3.2.1.js"></script>

        <script>

            $(document).ready(function(){

                $('.form2').on('submit' , function(e){

                    var valid = {};
                    var isValid;
                    var elements = document.getElementsByClassName('all');

                    for(var i = 0; i<elements.length ; i++){
                        isValid = validateRequired(elements[i]) && validateTypes(elements[i]);
                        valid[elements[i].id] = isValid;

                        if(!isValid){
                            elements[i].style.border = '1px solid red';
                        }else{
                            elements[i].style.border = '';
                        }
                    }

                    function validateRequired(el){
                            if(el.required){  // if the element is required
                                return el.value;
                            }else{ // if the element is not required
                                return true;
                            }
                    }

                    function validateTypes(el){
                        var type = el.getAttribute('type');

                        if(validateType[type] === 'function'){
                            return validateType[type](el);
                        }else{ // no need to validate 
                            return true;
                        }
                    }

                    var validateType = {
                        email: function(el){
                            var emailPattern = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

                            return emailPattern.test(el.value);
                        }
                    }

                    for(var property in valid){

                        if(!valid[property]){
                            e.preventDefault();
                        }
                    }

                    //console.log(typeof validateType);

                });

            }); // end of document ready
        </script>
    </body>

</html>

Answer 1

它在以下位置失败：

 validateType[type] === "function"

在validateTypes循环内调用的for内的

，但是在循环后声明validateType，因此在循环运行时它不存在。如果在循环之前声明validateType，该错误应消失。

面向对象的表单验证

1 个答案: