Question

我正在学习js中的oops并使用原型编写简单的验证类。我不知道为什么我会在undefined variable field函数中获得validateField。但是，我可以在addListener function中访问此变量。有人可以解释为什么变量未定义和帮助。以下是我的代码：

var Validate = function(formId){
  this.form=formId;
}

Validate.prototype.addValidation=function(field,condition,message){
  this.field=field;
  this.condition=condition;
  this.message=message;
  this.objform=document.getElementById(this.form);
  this.addListener();
}

Validate.prototype.addListener=function(){
  console.log(this.objform);
  document.addEventListener("submit",this.validateField,false);
}

Validate.prototype.validateField= function(e){
  e.preventDefault();
  alert(this.field);
}


 $( document ).ready(function() {
    var obj=new Validate('user');
    obj.addValidation('fname','req','Field is Required');
})

 I am able to solve my problem by binding "this" using      
 addEventListener("submit",this.validateField.bind(this),false);

但现在问题是当我尝试多次调用addValidation方法传递不同的字段名称时 - 例如'fname'和'lname' - 我收到两次显示lname的提示消息，从而覆盖fname字段。我不明白为什么会这样。

Answer 1

问题是当您使用

实例化新验证时

var obj = new Validate('user');

这将在每次调用obj.addValidation（）时引用相同的对象，以及如何在原型的addValidate方法中存储字段，条件，消息，将为此分配最后调用的内容。

保持相同功能的一种简单方法是在addValidate方法中存储一个包含此信息的对象。

Validate.prototype.addValidation=function(field,condition,message){
  // don't overwrite existing validation rules added
  this.validations = this.validations || {};

  // no need to keep two values of field saved, can use key names if you need to know field names saved
  this.validations[field] = {
    condition: condition,
    message: message
  };

  this.objform=document.getElementById(this.form);
  this.addListener();
}

Validate.prototype.validateField= function(e){
  e.preventDefault();
  // you would no longer call this.field, but would reference this.validations with either a for in loop,
  // or Object.keys
  Object.keys(this.validations).forEach(function(fieldName) {
    alert(fieldName);
  }
}

原型函数中的未定义变量

1 个答案: