您可以使用循环,或一些相当标准的内置浏览器功能。
循环
以下是使用循环的方法。这应该是最快的代码,但您可能不需要最快的代码,除非您要检查大量项目的大量字段。我建议改为"correct, clear, concise, fast" 优先级,因此认为您应该从内置浏览器功能开始。但这里仅供参考:
var fieldsPass = true;
var i, l = fields.length;
for (i = 0; i < l; i += 1) {
if (fields[i].checkValidity()) continue;
fieldsPass = false;
break;
}
请注意,在循环外声明i 变量并在循环外捕获字段长度是可选的。
我第一次这样做是因为很多人不知道提升,而且for (var i ... 不会创建仅在for 循环内可用的变量,这与在函数的顶部,这种行为可能会导致错误。
我出于习惯而做的第二个,尽管正如我所说,您可以将它放在循环检查中。 See this discussion。如果您确实使用循环方法,您可能正在寻找更好的性能,因此可能希望使用捕获的长度方式以获得最佳性能。 (如果它真的那么重要,你可以使用var i = fields.length; while (i--) { } 方法。)
浏览器函数数组.Every
>
您可以使用Array.prototype.every()(来自 ECMAScript 2015 第 6 版):
Mozilla Developer Network
every() 方法测试数组中的所有元素是否通过提供的函数实现的测试。
fieldsPass = fields.every(function(field) {
return field.checkValidity();
});
当传入的函数在数组中的每个项目上运行时,它返回true,为所有这些项目返回true。如果任何一个返回false,它就会停止并返回false。在某些语言中,如果您熟悉的话,他们将相同的概念称为 all。
或者,最好只声明一次checkValidity 函数,而不是将它放在每个字段上。这可能是不可能的,这取决于您如何实现它(也许它可以访问私有变量?)。请注意,您提供的回调函数的第一个参数(请参阅上面链接中的文档)是迭代的currentValue,即您要检查的字段。如果您的函数看起来像这样,它将起作用:
function checkValidity(field) { /* check validity */ }
fieldsPass = fields.every(checkValidity);
浏览器函数数组.Some
您也可以使用Array.prototype.some()(来自 ECMAScript 2015 第 6 版):
Mozilla Developer Network
some() 方法测试数组中的某个元素是否通过了提供的函数实现的测试。
fieldsPass = !fields.some(function(field) {
return !field.checkValidity();
});
请注意,它基本上只是 every 的倒数,因为“ALL VALID”与“NOT (ANY INVALID)”相同。它只是意味着它检查数组中传递函数的任何一项,如果是,则返回true。在某些语言中,他们将相同的概念称为 any,如果您熟悉的话。
一般浏览器兼容性说明
请注意,对于这两个功能,浏览器兼容性非常好。如果您不关心版本 9 以下的 IE,那么您非常安全。如果你这样做了,那么你会想要使用上面链接的 MDN 页面上提供的 polyfill。您可以将该代码包含在您的 javascript 文件的全局范围内,然后就可以在 IE 8 及更低版本中正常使用它。 (我说的是这样开始的代码块:)
if (!Array.prototype.every) {
Array.prototype.every = function(callbackfn, thisArg) {
...
}