表單驗證邏輯Vanilla JS

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）如果要使用前端電子郵件驗證，請查看以下模式： 在JavaScript中驗證電子郵件地址？

5）如果您期望可以通過AJAX加載的動態輸入，則應該等待您的輸入（解決方案- 如何等待直到元素存在？ ）

6）使用FormData（）收集較大的輸入值，例如base64編碼的圖像或較大的textarea文本值（如果要通過AJAX發布此數據）

7）andofc總是在服務器端重新檢查驗證。

希望對您有所幫助。

Answer 2

您可以構建表單的簡單“模型”，然后將其傳遞給序列化的表單，並針對無效數據和成功觸發回調。 與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));