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

Posted 2023-05-09

【中文标题】表单：在表单提交之前使用 jQuery 验证特殊情况

【英文标题】：Form: Validate special cases with jQuery before form submission

【发布时间】：2021-03-08 16:42:48

【问题描述】：

我需要在不使用任何特殊插件的情况下验证表单，只需使用 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>

有什么想法吗？

【参考方案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');
  
);

【讨论】：

但是这里你没有验证电子邮件输入。

@Reacting - 对于电子邮件验证，代码仍然有效。您只需要像电话一样为电子邮件提供“模式”属性。该模式可以是电子邮件验证正则表达式，如 [^@]+@[^@]+\.[a-zA-Z]2,6 或其他如果您愿意的话。