时间戳

首页 > 解决方案 > 将开关/基本表单验证器转换为支持多个案例的东西

javascript - 将开关/基本表单验证器转换为支持多个案例的东西

问题描述

我正在尝试将表单输入验证器从处理错误 1 ​​到 1更改为一次处理所有错误。由于有很多活动部件，我将尝试隔离组件的关键区域。

https://codepen.io/jodriscoll/pen/pXyMqa?editors=0010

129: while ( error < rules.length ) {
130:     if ( !validations[rules[error]](vin_input.value) ) {

当定义了规则（输入要求）时，提取输入的value，然后将其传递value给validations的内部函数。如果 return 中的这些函数之一false，验证停止并且switch（错误输出）处理需要解决哪个错误（基于优先级/顺序）。

41: const validations = {
43:     // goal is to return true, then try the next validation requirement (order matters)
44:     required: function(value) {
45:         return value !== '';
46:     },
47:     special: function(value) {
48:         return value.match(/[^a-zA-Z0-9]/g) == null;
49:     },
50:     restricted: function(value) {
51:         return value.match(/[IiOoQq]/g) == null;
52:     },
53:     quantity: function(value) {
54:         return value.length > 16;
55:     },
56: };

问题： 由于此switch语句，如果规则返回值符合 case 条件，它将停止处理未来/附加错误。我的目标是允许用户出现多个错误（在这种情况下，搜索“A*IQ&”），然后当他们提交表单时，他们将收到针对检测到的每个错误的警报，而不是最高优先级。

179: switch( rules[error] ) {
189:     case 'required':

我正在考虑在 Object Literal 中处理错误，但宁愿接受建议和（可能）不同意见的示例。

更新 #1： 我能够以 FYI 的形式解决这个问题（https://codepen.io/jodriscoll/pen/XLKKwa?editors=0010），但我对“臃肿”不满意并想使用更好的方法。

标签： javascriptswitch-statementobject-literal

解决方案

我会考虑使用一个对象来跟踪可能看起来像这样的错误。这支持相同类型的多个错误。

let validations = {
  isValid: false,
  errors: [
    {
      type: 'required',
      message: 'You must provide a phone number.'
    },
    {
      type: 'quantity',
      message: 'The quantity selected must be between x and y.'
    }
  ]
}

然后你可以将 switch 语句重构为更像这样的东西：

validations.errors.forEach((error) => {
  switch(error.type){
    case 'required':
      // Do something.
      break;
    case 'quantity':
      // Do something else
      // etc...
  }
})

推荐阅读