检查字段有效性和提交前填写的字段？

Posted 2023-05-09

【中文标题】检查字段有效性和提交前填写的字段？

【英文标题】：Check Field Validity and Fields Filled Before Submission?

【发布时间】：2021-04-11 04:53:13

【问题描述】：

我正在修改这个问题，因为我已经改变了。

我有一个包含几个字段的表单，其中三个具有regex 验证。我还有一个功能可以检查在启用submit 按钮之前是否填写了所有字段，这很好用。但是，如果字段已填写但invalid 字段无效，我仍然可以提交表单。我想知道是否可以合并我的函数，以便在启用提交按钮之前检查字段是否已填写和valid？

我尝试添加一个额外的 && 子句，但这不起作用，我尝试实现 jQuery 验证插件，但它似乎非常有限，我无法使用它验证邮政编码。

这是我的项目的简化版本：

// ~~~ postcode validation

function validatePostcode(postcode) 
  var pcode = /^[a-zA-Z]1,2[0-9][0-9A-Za-z]0,1 0,1[0-9][A-Za-z]2$/;
  return pcode.test(postcode);


function validateP() 
  var postcode = $("#postcode").val();

  if (validatePostcode(postcode)) 
    $("#postcode").removeClass("is-invalid");
    return true;
   else 
    alert('Please enter a valid postcode');
    $("#postcode").addClass("is-invalid");
  
  return false;


// ~~~ validate if form is filled completely, toggles submit & edit button

$(document).on('change keyup invalid', '.required', function(e) 
  var disabled = true;

  $(".required").each(function() 
    var value = this.value;

    if ((value) && (value.trim() != '')) 
      disabled = false;
      $('.toggle-disabled').prop("disabled", false);
     else 
      disabled = true;
      $('.toggle-disabled').prop("disabled", true);
      return false;
    
  );


);

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<div class="col-md-6">
  <input type="text" id="postcode" class="input postcode form-control required" onchange="validateP()" placeholder="Post Code" name="postcode" required>
</div>
<div class="col-md-6">
  <input id="submit" class="btn btn-danger toggle-disabled" type="submit" value="Submit" disabled>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

【问题讨论】：

jQuery 验证插件可以完成您需要做的所有事情，只需最少的自定义编码。我建议你试试这个，而不是自己写所有的代码。

我已经尝试过了，它对我也不起作用，仍然让我提交表单

我试图实现它，但它不允许我做我需要做的所有验证，我只想继续我现在拥有的东西，因为我的项目很快就要到期了。但我会进一步调查@user1751825

jQuery validate 支持您可能需要的任何类型的验证。它是完全可定制的。

【参考方案1】：

使用下面的正则表达式：

/^([0-9a-zA-Z\-\._]+)@([0-9a-zA-Z\-\._]+)\.([a-zA-Z])2,7$/

【讨论】：

这不是问题的答案。这只是一个稍微不正确的电子邮件正则表达式。