利用策略模式与装饰模式扩展JavaScript表单验证功能

利用策略模式和装饰模式可以很好地扩展JavaScript表单验证功能。下面就详细讲解如何实现这样的扩展：

策略模式

策略模式定义了一系列可以互换的算法，每个算法都独立封装起来，使得它们之间可以互相替换。利用策略模式，我们可以根据不同的策略选择不同的验证算法。

实现步骤

1. 定义验证算法的接口，即策略类接口。
2. 实现不同的验证策略类，每个类都实现策略类接口。
3. 在表单验证类中，定义一个策略属性和一个校验方法，根据不同的策略选择不同的验证算法。

示例

下面是一个利用策略模式实现表单验证的示例代码：

// 定义策略接口
var Validator = {
  // 定义验证方法
  validate: function(value) { }
};

// 实现不同的策略类
var RequiredValidator = Object.create(Validator);
RequiredValidator.validate = function(value) {
  if (value === '') {
    return false;
  } else {
    return true;
  }
}
var EmailValidator = Object.create(Validator);
EmailValidator.validate = function(value) {
  var re = /^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/;
  return re.test(value);
}

// 定义表单验证类
function FormValidator() {
  // 定义策略属性
  this.strategy = {};
}
FormValidator.prototype.setStrategy = function(strategy) {
  this.strategy = strategy;
}
FormValidator.prototype.validate = function(value) {
  return this.strategy.validate(value);
}

// 使用策略模式验证表单
var validator = new FormValidator();
validator.setStrategy(RequiredValidator);
validator.validate('');
// 输出 false

validator.setStrategy(EmailValidator);
validator.validate('[e-mail]');
// 输出 true

在这个示例代码中，我们定义了Validator接口和两个不同的验证策略类RequiredValidator和EmailValidator。然后我们定义了FormValidator类并实现了setStrategy和validate方法。通过setStrategy方法，我们可以动态地改变策略，从而使用不同的验证算法。

装饰模式

装饰模式可以动态地将功能添加到对象中，通过实现组件接口并递归组合来达到这个目的。利用装饰模式，我们可以在执行表单验证的过程中，动态地添加一些自定义的验证规则。

实现步骤

1. 定义组件接口，即组件类接口。
2. 实现组件类，即表单验证类。
3. 实现装饰器类，并继承组件类接口，同时在构造函数中传入组件实例并保存到本地属性中。
4. 在装饰器类中实现自定义的验证方法，并在验证前调用组件类的验证方法。

示例

下面是一个利用装饰模式扩展表单验证功能的示例代码：

// 定义组件接口
var Component = {
  validate: function(value) { }
};

// 定义组件类
function FormValidator() { }
FormValidator.prototype.validate = function(value) {
  var elements = this.form.elements;
  for (var i = 0; i < elements.length; i++) {
    var element = elements[i];
    if (!element.dataset.validator) {
      continue;
    }
    var rules = element.dataset.validator.split('|');
    for (var j = 0; j < rules.length; j++) {
      var rule = rules[j];
      // 根据不同的规则调用不同的验证方法
      switch (rule) {
        case 'required':
          if (!RequiredValidator.validate(element.value)) {
            return false;
          }
          break;
        case 'email':
          if (!EmailValidator.validate(element.value)) {
            return false;
          }
          break;
        case 'custom':
          if (!CustomValidator.validate(element.value)) {
            return false;
          }
          break;
      }
    }
  }
  return true;
}

// 定义装饰器类
function CustomValidatorDecorator(component) {
  this.component = component;
}
CustomValidatorDecorator.prototype.validate = function(value) {
  // 调用组件类的验证方法
  var result = this.component.validate(value);
  // 执行自定义验证
  if (value !== '123456') {
    result = false;
  }
  return result;
}

// 实现不同的策略类
var RequiredValidator = {
  validate: function(value) {
    if (value === '') {
      return false;
    } else {
      return true;
    }
  }
};
var EmailValidator = {
  validate: function(value) {
    var re = /^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/;
    return re.test(value);
  }
};
var CustomValidator = {
  validate: function(value) {
    return value === '123456';
  }
};

// 使用装饰模式扩展表单验证
var validator = new FormValidator();
// 添加装饰器
validator = new CustomValidatorDecorator(validator);
validator.validate('123456');
// 输出 true

在这个示例代码中，我们定义了Component接口和FormValidator组件类，用于实现基本的表单验证功能。然后我们定义了CustomValidatorDecorator装饰器类，并实现了自定义的验证方法。在validate方法中，我们先调用组件类的验证方法，然后执行自定义验证。最后，我们实例化了一个FormValidator对象，并添加了一个CustomValidatorDecorator装饰器，从而扩展了表单验证功能。