Question

我正在寻求建议。我已经建立了相当大的形式，而且之前从未做过这样的事情，所以我试图找出最好的做事方式。我和vanilla JS合作验证我的字段。我想基本上设置两层验证。第一层将用于每个单独的字段。在模糊时，我想检查一些小事情，例如，如果它是名称输入并且他们放数字，或者邮政编码遵循直接模式。

对于其中的每一个，我想要一个单独的验证器，最后，如果所有的小验证都是真的并且所有字段都已填写完毕，我希望禁用的输入被启用。

任何人都可以指导我了解最佳方法吗？

任何帮助都会很棒。

Answer 1

嗯，实际上没有最好的办法，因为每个开发人员都会选择自己的方式进行验证。至少这已经通过插件实现了自动化。但是有关验证和表格的一些建议可能会有所帮助：

1）始终标记必填字段。

2）根据验证测试，在你的输入中附加/删除类，这样用户就能看出他做错了什么。

3）您可以按类（或其他属性）组合输入验证（输入组验证）例如，您可以使用相同的验证规则来输入多个文本输入：

var input = document.querySelectorAll('.someinputgroup');
    input.forEach(function (elem, index) {
        var that = input[index];
        validationRule(that);
    });

    function validationRule(elem) {
        elem.addEventListener('blur', function (e) {
            // validation....
        })
    }

4）如果您想使用前端电子邮件验证，请查看以下模式：Validate email address in JavaScript?

5）如果你期望动态输入可以通过AJAX加载，你应该等待你的输入（解决方案 - How to wait until an element exists?）

6）使用FormData（）收集大型输入值，如base64编码图像或大型textarea文本值（如果您要通过AJAX POST这些数据）

7）并且总是在服务器端重新检查验证。

我希望它有所帮助。

Answer 2

你可以构建简单的＆＃34;模型＆＃34;你的表单，然后传递它序列化的形式，触发无效数据和成功的回调。与Backbone.Model类似。

我还没有测试过，但是这里有一些代码可以让你了解我的意思。

function SomeForm(options) {
   this.onSuccess = options.onSuccess;
   this.onInvalid = options.onInvalid;
}

SomeForm.prototype = {
  valiadate: function validate(data) {
    // Your validation logic
  },

  submit: function submit(data) {
    var validationErrors;

    validationErrors = this.validate(data);

    if (!validationErrors) {
      this.onSuccess(data);

      return;
    }

    this.onInvalid(validationErrors);
  }
};

function serializeForm(formEl) {
  var fields, data;

  data = {};
  fields = formEl.querySelectorAll('input, select, textarea');

  for (var i = 0; i < fields.length; i++) {
    if (fields[i].disabled === true || !fields[i].name) {
      continue;
    }

    data[fields[i].name] = fields[i].value;
  }

  return data;
}

var someForm = new SomeForm({/*callbacks*/});
var formEl = document.querySelctor('.foo');
someForm.submit(serializeForm(formEl));

表单验证Logic Vanilla JS

2 个答案: