javascript - 表单：在表单提交之前使用 jQuery 验证特殊情况

Question

我需要在不使用任何特殊插件的情况下验证表单，只需 jQuery。

我有一个禁用的提交按钮，我像这样启用它：

const getFields = $(
  'form#inquiry-component-form input, form#inquiry-component-form textarea, form#inquiry-component-form select'
).filter('[required]:visible');

getFields.on('input', () => {

  let empty = false;

  getFields.each(function() {
    if (!empty && $(this).val() == '') {
      empty = true;
    }
  });

  $('#submit-inquiry-form').prop('disabled', empty);
});

我遇到的问题是表单包含电话号码和电子邮件地址输入，因此当这两个输入不再为空时，提交按钮将变为启用状态。我需要它们首先匹配模式，然后启用提交按钮。

这些是电话和电子邮件输入：

<input id="inquiry-phone" class="form-control" type="tel" name="phone" placeholder="Phone Number (10 digits)" pattern="[1-9]{1}[0-9]{9}" required>
<input id="inquiry-email" class="form-control" type="email" name="email" placeholder="Email address" required>

有任何想法吗？

标签： javascripthtmljqueryformsvalidation

Answer 1

你可以尝试这样的事情。我添加了一个提交按钮，然后我们正在检查是否启用该按钮或不使用正则表达式。

<form id="submit-inquiry-form">
  <input id="inquiry-phone" class="form-control" type="tel" name="phone" placeholder="Phone Number (10 digits)" pattern="[1-9]{1}[0-9]{9}" required>
  <input id="inquiry-email" class="form-control" type="email" name="email" placeholder="Email address" required>
  <button id="btn" disabled>Submit</button>
</form>

const getFields = $(
  'input'
).filter('[required]:visible');

getFields.on('input', () => {
  let empty = false;
  let patternMatch = true;
  
  getFields.each(function() {
    console.log("check", $(this).val())
    if ($(this).val().trim() == '') {
      empty = true;
    }
    
    // check for regex
    if ($(this).attr("pattern")) {
      const regex = new RegExp($(this).attr("pattern"));
      patternMatch = regex.test($(this).val())
    }
  });
  
  if (empty || !patternMatch) {
    console.log("empty or bad match")
    $('#btn').attr('disabled', true);
  } else {
    $('#btn').removeAttr('disabled');
  }
});