Question

用户输入数据时是否可以验证文本字段？例如，如果用户在表单中选中一个复选框，不在文本字段中输入数据，并转到下一个复选框，则表单应立即生成错误，提示用户输入先前选中的复选框的数据。换句话说，除非每个部分，否则用户将无法继续正确完成（单击提交按钮时表单末尾的错误消息）

谢谢！

Answer 1

有很多插件可以帮到你。

jQuery表单验证插件：This one is good

如果您决定手动执行此操作，则需要使用以下内容：

$('input').on('change', function(){...});

Answer 2

以下是javascript模糊/焦点的一些示例：

https://javascript.info/focus-blur

Answer 3

对于你可以玩的东西，这里是jsfiddle我扔在一起。它使用jQuery关注焦点和模糊事件。它检查是否有任何先前的＆＃34;要求＆＃34;字段留空（或未选中）。

$(document).ready(function() {
  function checkCheckbox(jEl) {
    return jEl.is("input[type='checkbox']:checked");
  }

  function checkTextbox(jEl) {
    return jEl.is("input[type='text']") && jEl.val() != ""
  }

  function validate(el) {
    el.parent('div')
      .prevAll('div:has(".required")')
      .add(el.parent('div'))
      .addClass('error')
      .each((i, e) => {
        jEl = $(e).children('.required');
        if (checkCheckbox(jEl) || checkTextbox(jEl)) {
          $(e).removeClass('error');
        }
      })
  }
  $(".required").on("focus blur", function() {
    validate($(this))
  });
});

在HTML表单中，我们可以在用户填写表单时验证文本字段

3 个答案: