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

Question

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

我有一个包含几个字段的表单，其中三个具有regex验证。 我还有一个 function 在启用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>

Answer 1

使用下面的正则表达式：

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