javascript - 检测通用自定义属性的值而不直接向元素添加代码？

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');