嵌套 <input> 时的样式 <label> 无效

Question

理想情况下，我希望标签文本在输入值无效时改变颜色。

例子：

<form>
  <label>
    Enter an email address:
    <input type="email">
  </label>
</form>

理想情况下，我会使用这样的东西，但它不起作用，因为它是无效的 <input>，而不是 <label>：

label:invalid {
  color: red
}

我以这种方式设置了我的<label> 和<input>，这样我就不需要将id 传递到这些元素中。

与此类似，但 <label> 和 <input> 不是兄弟姐妹：https://pretagteam.com/question/change-the-colour-of-a-label-when-an-input-is-invalid

Answer 1

您可以通过使用变量名称label 引用标签元素并根据您的喜好操作其属性来解决此问题。

let label = document.querySeletor("label")
 
if (!isValid(email){
   label.style.Color = "red"
}

但是，您可以创建一个检查输入验证的函数 例如由正则表达式组成的函数isValid(email)

上述是否回答了您的问题？