Question

我最近开始关注Javascript以及面向对象的JS，除了对集合的支持不佳外，我对面向对象的JS印象深刻。无论如何回到主题..作为一个练习我试图为我的应用程序创建一个验证库，但似乎实例值范围要么我不理解，否则这是奇怪的行为。为了说明这种行为，我已经将库切成基本的最小值，以便在此处呈现。

以下给出的示例验证电子邮件格式是否正确或不。
当您输入正确的格式（例如
）时，问题就会显示 johndoe@gmail.com并点击提交。
它将触发修改IS_ERROR
的注册事件实例字段为false并由警报1显示。
然后，如果单击“提交”按钮，则会触发更新功能通过尝试显示
的提交按钮的onclick事件根据警报2再次出现IS_ERROR值。
令人惊讶的是，这两个值是不同的。怎么可能？
我错过了什么？

的test.html

 <!DOCTYPE html>
<html>
<head>
<script src="validations.js"></script>
</head>
<body>  
  <form id="addEmailForm" action="/add/email" method="post">
        <div id="error"></div>
        Email <input type="email" id="email" name="email">
        <input type="button" onclick="update()" value="submit"></input>
  </form>
  <script>
    var registry = new ValidationRegistry(); 
    (
        function initialize(){

            var validation = new Validation("email",registry.EMAIL_VALIDATOR,"blur","error");
            registry.add(validation);

        }
    )();    

    function update(){
        alert("2 : "+registry.IS_ERROR);
        if(!registry.IS_ERROR){
            document.getElementById("addEmailForm").submit();
        }
    }
   </script>
</body>
</html>

validations.js

function ValidationRegistry(){

    this.EMPTY_FIELD_VALIDATOR=1;
    this.UNIQUE_FIELD_VALIDATOR=2;
    this.FIELD_LENGTH_VALIDATOR=3;
    this.SPECIAL_CHAR_VALIDATOR=4;
    this.EMAIL_VALIDATOR=5;
    this.PHONE_VALIDATOR=6;
    this.IS_ERROR=true;
    this.factory;

    this.add=function(validation){

                var fieldId = validation.field;
                var validatorKey = validation.validator;                
                var event = validation.event;
                var errField = document.getElementById(validation.errField);
                var field = document.getElementById(fieldId);
                var result = null;

                field.addEventListener(event,function(){
                    this.factory = new ValidatorFactory();
                    var validator = this.factory.getValidator(validatorKey);

                    result = validator.validate(fieldId);

                    if(result!=true && errField!==null){
                            errField.style.color="#FF0000";                     
                            errField.innerHTML=result;
                            this.IS_ERROR=true;                         
                    }else{
                            this.IS_ERROR=false;
                            alert("1 : "+this.IS_ERROR);
                    }

                });

            }
}

function Validation(field,validator,event,errField){

    this.field=field;
    this.validator=validator;
    this.event=event;       
    this.errField=errField;

}


function ValidatorFactory(){
    this.getValidator=function(type){

    switch(type){

        case 5:
            return new EmailValidator();
            break;
        default:
            alert('default');
        }
    }
}       


function EmailValidator(){
    this.message="Invalid Email Id";
    this.validate=function(fieldId){                                
                        var value = document.getElementById(fieldId).value;                 
                        var regex = /(.*)@(.*)\.(.*)/;                              
                        if(regex.test(value)){
                            return true;
                        }
                        return this.message;
                    }
}

面向对象Javascript中实例字段范围的奇怪行为

0 个答案: