如何检查表单输入框中aria-invalid属性的值？

没问题，我来帮你搞定这个检查输入框aria-invalid属性的问题！你已经成功获取到了目标元素，接下来只需要用合适的方法读取属性值并判断即可，下面分原生JavaScript和jQuery两种方式给你示例：

原生JavaScript方案 #

你可以通过两种方式读取aria-invalid的值：

• 使用getAttribute()获取字符串形式的属性值，需要和字符串"true"/"false"做比较
• 使用DOM元素的ariaInvalid属性（这是专门的ARIA属性API），直接返回布尔值，更直观

$(document).ready(function(){
  var input_email = document.getElementById("contact-email");
  
  // 方法1：读取字符串属性值并判断
  var ariaInvalidValue = input_email.getAttribute("aria-invalid");
  if (ariaInvalidValue === "true") {
    console.log("当前输入无效");
    // 这里可以添加你的处理逻辑，比如显示错误提示
  } else {
    console.log("当前输入有效");
  }

  // 方法2：直接获取布尔值（更推荐）
  var isInputInvalid = input_email.ariaInvalid;
  if (isInputInvalid) {
    console.log("当前输入无效");
  } else {
    console.log("当前输入有效");
  }
});

jQuery方案 #

因为你的代码里已经用到了jQuery，也可以用jQuery的方法来读取：

• attr()方法返回字符串形式的属性值
• prop()方法会返回对应的布尔值（针对ARIA属性更准确）

$(document).ready(function(){
  var $inputEmail = $("#contact-email");
  
  // 方法1：读取字符串值
  var ariaInvalidStr = $inputEmail.attr("aria-invalid");
  if (ariaInvalidStr === "true") {
    // 处理无效输入的逻辑
  }

  // 方法2：读取布尔值（推荐）
  var isInvalid = $inputEmail.prop("ariaInvalid");
  if (isInvalid) {
    // 处理无效输入的逻辑
  }
});

小提示 #

如果需要实时监听这个属性的变化（比如用户输入时表单验证更新了aria-invalid），可以给输入框添加input或者change事件监听，在事件回调里检查属性值：

$(document).ready(function(){
  var $inputEmail = $("#contact-email");
  
  $inputEmail.on("input", function() {
    var isInvalid = $(this).prop("ariaInvalid");
    console.log("当前输入是否无效：", isInvalid);
    // 根据结果更新页面提示等
  });
});

内容的提问来源于stack exchange，提问作者Jae Eun