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";
  }
}

Answer 2


function validate(e) {
  var v = this.vMap[e.getAttribute('validationtype')];
  v && v(e);
}
validate.vMap = {
  'text': function(element) {
    // validate codes
  }, 'textarea': function(element) {
    // validate codes
  }/* ... and so on */
};

// to use
validate(document.getElementById('aId'));

Answer 3

不是自己实现，而是如何使用jQuery Validation plug-in？

Answer 4

您需要找到一种方法，以一些易于自动生成的便携式格式，字符串或JSON编码每个验证规则。

然后你需要改变函数来解析这些规则。

格式可能是

{
    [
        {"fieldname":"something","validationtype":"minmax","arguments":{"min":10,"max":20}}
        , {"fieldname":"somethingelse","validationtype":"largerthanfield","arguments":{"field":""something}}
    ]
}

然后，这将测试该字段在10到20的范围内，并且某个东西2大于某个东西。

您应该实施哪些规则选项取决于您的解决方案，并且几乎可以有任何数量的变体。

Javascript - 需要策略模式建议

4 个答案: