Javascript - 需要策略模式建议

Question

我有一个类似 Javascript 表单验证器的函数

 switch (element.getAttribute('validationtype')) {

        case 'text':
            if (cic.visible(element)) {
                if (cic.getValue(element).strip() == "") {
                    errors.push(element.getAttribute('validationmsg'));
                    element.style.border = "1px solid #B23232";
                } else {
                    element.style.border = "1px solid #CAD5DE";
                }
            }
            break;

        case 'textarea': if (element.value.strip() == "") {
                errors.push(element.getAttribute('validationmsg'));
            }
            break;

        case 'email':
            if (!cic.isEmail(cic.getValue(element))) {
                errors.push(element.getAttribute('validationmsg'));
                element.style.border = "1px solid #B23232";
            } else {
                element.style.border = "1px solid #CAD5DE";
            };
            break;

        case 'numeric':
            if (cic.getValue(element).strip() == "" || isNaN(cic.getValue(element).replace(',', '.'))) {
                errors.push(element.getAttribute('validationmsg'));
                element.style.border = "1px solid #B23232";
            } else {
                element.style.border = "1px solid #CAD5DE";
            };
            break;

    }

每次我需要一个新的验证类型时，我都必须更改函数。将此功能组织为一个类的最佳方式应该是什么，以便它不会更改。

Answer 1

您需要找到验证中的通用部分和特定于类型的部分(不要重复自己)。

// Type Specific Validation  
var Validator = {
  "text": function (data) {
       // validate text
  },
  "email": function (data) {
       // validate email
  },
  // ...
}

在你的函数中:

// Common Validation
var type = el.getAttribute('validationtype');
var isValid = Validator[type];

if ( cic.visible(el) ) { 
  if ( !isValid(el) ) {
    element.style.border = "1px solid #B23232";
    errors.push(element.getAttribute('validationmsg'));
  } else {
    element.style.border = "1px solid #CAD5DE";
  }
}