简单表单验证模块

Question

考虑到表单验证，我只想要一些简单的、工作的、可扩展的东西。

我想出了下面的代码，它需要一个选择器列表，它映射到执行验证的一个或多个函数。成功时，验证器函数返回一个"falsey“值(最好是空字符串或false )，如果成功，它将返回错误文本。最后的结果是从所有输入到它们产生的一个或多个错误的映射。

欢迎对风格和良好实践的任何评论，以及对ES-6功能的良好使用。

export default function validateForm(form, rules, baseSelector = 'input,textarea') {
  let inputs = form.querySelectorAll(baseSelector);
  let errorMap = new Map();
  for (let input of inputs) {
    errorMap.set(input, validateInput(input, rules));
  }
  return errorMap;
}

function validateInput(input, rules) {
  let errors = [];
  for (let rule of Object.keys(rules)) {
    if (input.matches(rule)) {
      let e = validateRule(input, rules[rule]);
      errors.push(...e);
    }
  }
  return errors;
}

function validateRule(input, validators) {
  // In case only a single function is provided instead of an array
  if (typeof validators === 'function') {
    validators = [validators];
  }

  return validators
    .map(validate => validate(input))
    .filter(result => !!result);
}

样例呼叫：

function ensureRequired(input) {
  if (!input.required || input.value) {
    return '';
  }
  return 'required field not set';
}

function ensureNumber(input) {
  if (Number.isInteger(input.value)) {
    return '';
  }
  return 'field must be number';
}

let myForm = document.getElementById('myForm');
let validationResult = validateForm(myForm, {
  'input': ensureRequired,
  'input.phoneField': [ensureNumber]
};

免责声明:我知道HTML5已经内置了表单验证，我有意避免使用它。

Answer 1

以下是我的想法：

• 适当的使用箭头功能。如果你真的愿意，你可以缩短一些小的函数--例如:函数ensureNumber (输入){ If (Number.isInteger(input.value)) {返回''；}返回‘字段必须是数字’；}可以缩短为一行: const ensureNumber= (input) => Number.isInteger(input.value)？‘’：‘字段必须是数字’；
• 在从字段的映射验证中获取错误时，我还喜欢使用spread操作符。
• 根据validationResult的使用方式，可以使用POJO代替Map来使用更少的内存，尽管这可能不是问题。POJO不像.forEach那样具有地图 (尽管可以迭代POJO的键)。显然在使用符合ES-2015标准的引擎时，键顺序保持不变.
• 考虑到更新DOM可能不可取/不可能，可以将类名应用于输入/文本区域/选择/等等，然后使用Document.getElementsByClassName()而不是querySelectorAll()，但这可能只会带来轻微的性能提高。