javascript - 表单验证检查两个字段是否相等

Question

我有一个 javascript 验证脚本，用于检查字段是否包含内容，并且我有一个验证脚本，用于检查两个电子邮件字段是否具有相同的输入，但我想将这两个脚本合并为一个脚本，因此我只需推送一个带有错误消息的 div

第一部分(检查字段是否有任何输入)

function isValid(fldId,len) {
var fld = $("#"+fldId);
var val = fld.val();
window.console && console.log(fld,fldId)
if (val == "" || (len && val.length<len)) {
  fld.css("borderColor","red");
  return false;
}      
fld.css("borderColor","black");
return true;
}

$(function() {
$("form").on("submit",function() {
var errormessage = [];

if (!isValid('name')) {
  errormessage.push("error name");
}
if (!isValid('email')) {
  errormessage.push("error email");
}
if (!isValid('emailnogmaals')) {
  errormessage.push("error email again");
}  
if (errormessage.length>0) {
  window.console && console.log("error present");
  $(".error-messages").html(errormessage.join('<br/>')).fadeIn();
  return false;
}
window.console && console.log("success");
return true;
});
});

第二部分(检查两个字段是否具有相同的输入)

function checkEmail(theForm) {
if (theForm.email.value != theForm.emailnogmaals.value)
{
    $(".error-message-email").text("• De e-mail adressen komen niet overeen").fadeIn();
    return false;
} else {
    return true;
}
}

是否可以将两者结合起来？

Answer 1

编写 javascript 表单验证似乎总是很乏味，对我来说总是有一种似曾相识的感觉，我的意思是这是 javascript 真正被用来做的第一件事之一，所以我总觉得我正在重新发明车轮。当您从头开始编写它时，似乎需要几次迭代才能使其正确。

关于轮子(即它的发明)，我觉得它是用 jQuery 验证插件( link here )定义的。这是一个相当成熟的插件(已经存在了大约 8 年左右)并且运行得非常好。验证包括但不限于:必填、最小值、最大值、范围、电子邮件、数字、日期、信用卡和 equalTo(比较字段)。您还可以添加自己的验证规则。

你确实需要花一些时间来了解它(即它是如何做事的，特别是它使用的属性和它给出验证错误的类名)，但是一旦你这样做了，你就可以轻松地再次使用它再次强调，如果您愿意，每次使用时都可以更改样式