在不直接向元素添加代码的情况下检测通用自定义属性的值？

Question

我正在尝试使用Javascript来弄清楚如何使用最后一个属性“aria-invalid”（将等于“true”或“false”）来检测电子邮件输入的值。问题是页面上的其他字段以相同的方式使用相同的属性“aria-invalid”。不知道我怎么才能读取电子邮件输入属性的值？我不能在元素中添加任何代码，请不要jQuery。

<input class="masked-zip-code not-empty input-validation-error" data-val="true" data-val-regex="Enter a valid (5-digit) ZIP code." data-val-regex-pattern="^\d{5}(-\d{4})?$" data-val-required="Enter a ZIP code" id="ZipCode" name="ZipCode" type="text" value="" aria-required="true" aria-describedby="ZipCode-error" aria-invalid="true">

Answer 1

您需要一种方法来判断哪一个是哪个，并且由于共享aria-invalid，因此无法使用它。您可以使用ID或type="email"来区分此类字段。请参阅以下内容：

<input class="masked-zip-code not-empty input-validation-error" data-val="true" data-val-regex="Enter a valid (5-digit) ZIP code." data-val-regex-pattern="^\d{5}(-\d{4})?$" data-val-required="Enter a ZIP code" id="ZipCode" name="ZipCode" type="text" value="" aria-required="true" aria-describedby="ZipCode-error" aria-invalid="true">
<input class="masked-zip-code not-empty input-validation-error" data-val="true" data-val-regex="Enter a valid (5-digit) ZIP code." data-val-regex-pattern="^\d{5}(-\d{4})?$" data-val-required="Enter a ZIP code" id="ZipCode" name="ZipCode" type="email" value="" aria-required="true" aria-describedby="ZipCode-error" aria-invalid="true">

然后，您可以使用此代码访问aria-invalid值：

var aria-invalid-value = document.querySelector("input[type='email']")[0].getAttribute('aria-invalid');

Answer 2

var invalid = document.getElementById('ZipCode').getAttribute('aria-invalid');
console.log(invalid);

See JSFiddle