javascript设计模式–策略模式之输入验证

JavaScript 设计模式 -- 策略模式之输入验证

在 JavaScript 中，策略模式是一种行为型模式，它允许开发人员定义一些独立的算法，并将它们封装成一个库以便能够重用、扩展和替换。

1. 策略模式概述

策略模式的核心思想是创建一个抽象的策略接口，然后实现不同的策略来解决同一个问题。在 JavaScript 中，我们可以使用对象字面量的方式来模拟一个策略接口。

以下是一个简单的策略模式示例：

var strategy = {
  add: function(num1, num2) {
    return num1 + num2;
  },
  subtract: function(num1, num2) {
    return num1 - num2;
  }
};

var calc = function(operation, num1, num2) {
  return strategy[operation](num1, num2);
};

calc('add', 5, 3);      // 8
calc('subtract', 5, 3); // 2

2. 输入验证

策略模式可以用于输入验证，这是因为输入验证通常可以根据不同的输入类型和验证规则来进行不同的处理。

以下是一个简单的输入验证示例：

var validator = {
  validateEmail: function(email) {
    var pattern = /^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]+$/;
    return pattern.test(email);
  },
  validatePhone: function(phone) {
    var pattern = /^1[3|4|5|7|8][0-9]{9}$/;
    return pattern.test(phone);
  }
};

var validateInput = function(type, input) {
  return validator['validate' + type](input);
};

validateInput('Email', '[e-mail]'); // true
validateInput('Phone', '13812345678');     // true

在上面的例子中，我们首先定义了一个 validator 对象，它包含两个验证函数，分别是 validateEmail 和 validatePhone。我们使用了命名规范，以便传递一个字符串类型 type 来选择要执行的验证函数。

因此，在 validateInput 函数中，我们可以根据传递的 type，选择要执行的验证函数，并将输入数据传递给该函数进行验证。

如果要添加新的验证规则，只需要向 validator 对象中添加一个新的验证函数，并在 validateInput 函数中添加相应的 if 判断语句即可。

3. 输入验证示例

以下是一个稍微复杂一些的输入验证示例，用于验证表单数据：

var validator = {
  validateEmail: function(email) {
    var pattern = /^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]+$/;
    return pattern.test(email);
  },
  validatePhone: function(phone) {
    var pattern = /^1[3|4|5|7|8][0-9]{9}$/;
    return pattern.test(phone);
  },
  validateRequired: function(input) {
    return input !== '' && input !== undefined;
  },
  validateLength: function(input, length) {
    return input.length === length;
  }
};

var validateInput = function(type, input, param) {
  if (validator['validate' + type]) {
    return validator['validate' + type](input, param);
  }
};

var validateForm = function(inputs) {
  var errors = {};

  for (var key in inputs) {
    if (inputs.hasOwnProperty(key)) {
      var input = inputs[key];
      var rules = input.rules;

      for (var i = 0; i < rules.length; i++) {
        var rule = rules[i];

        if (!validateInput(rule.type, input.value, rule.param)) {
          errors[key] = rule.errorMsg;
          break;
        }
      }
    }
  }

  return errors;
};

var inputs = {
  email: {
    value: '[e-mail]',
    rules: [
      { type: 'Email', errorMsg: 'Email 格式不正确' },
      { type: 'Required', errorMsg: 'Email 不能为空' }
    ]
  },
  username: {
    value: 'test',
    rules: [
      { type: 'Length', param: 5, errorMsg: '用户名长度必须为 5' },
      { type: 'Required', errorMsg: '用户名不能为空' }
    ]
  },
  phone: {
    value: '13812345678',
    rules: [
      { type: 'Phone', errorMsg: '手机号格式不正确' }
    ]
  },
  password: {
    value: '',
    rules: [
      { type: 'Required', errorMsg: '密码不能为空' }
    ]
  }
};

validateForm(inputs); // { email: undefined, username: '用户名长度必须为 5', phone: undefined, password: '密码不能为空' }

在这个例子中，我们定义了一个 inputs 对象，它包含了需要验证的数据和验证规则。我们使用 validateForm 函数来验证每个输入的数据是否符合相应的规则，并返回所有不符合规则的输入的错误信息。

在 validateForm 函数中，我们遍历了 inputs 对象，并根据每个输入的验证规则来进行验证。在每个规则中，我们可以通过 type 属性来选择要执行的验证函数，并将输入数据和规则参数作为参数传递给该函数进行验证。

如果输入数据不符合任何一个规则，则将错误信息存储在 errors 对象中并返回。否则，返回一个空对象。

在上图中，我们使用 Email、 Phone、 Required 和 Length 四个验证函数来对每个输入数据进行验证。如果要添加新的验证规则，只需要向 validator 对象中添加一个新的验证函数，并在相应的输入对象中设置相应的验证规则即可。