Javascript 使用纯CSS进行表单输入验证

有没有任何方法可以在不使用JavaScript的情况下基于HTML元素的属性（而不是元素的属性）应用CSS类

例如，考虑下面的输入元素：

<input type="text" id="txtName" class="form-field__input" name="txtName" value="">

当用户与上面的元素交互并输入一些文本时，其“value”属性得到更新；但“value”属性仍然为空。我们可以通过任何方式访问CSS中元素的属性吗？我知道可以使用JavaScript更新“value”属性，然后使用属性选择器更新样式；但是，有没有办法只使用CSS选择器来实现这一点

为了澄清，我不关心输入是否有效，我只想检查内容的可用性，如果内容存在，则应应用“any-css-rule-1”，否则应用“any-css-rule-2”。

您可以在

html

中使用和

必需的
属性<代码>：有效的
，
：无效的
伪类位于
css
以匹配特定的用户输入


：valid+[for=“txtName”]：之后{
内容：“有效输入”；
颜色：绿色；
}
：无效+[for=“txtName”]：之后{
内容：“无效输入”；
颜色：红色；
}
您可以通过HTML5和CSS3功能的组合来实现。以下是我的示例代码：

HTML:

<form  action="#" class="contact-us-form" onsubmit="submitClick()">
  <input type="text" placeholder="First Name" required>
  <input type="text" placeholder="Last name">
  <input type="email" placeholder="Email" required>
  <input type="submit"/>
</form>
<p id="demo"></p>

.contact-us-form {
  display: flex;
  padding-bottom: 1.25em;
  flex-direction: column;

  .text-field {
    margin: 0.5em;
  }
  .button-submit {
    margin: 1em;
    width: 100px;
    float: right;
  }

  input[type="text"],
  input[type="email"] {
    margin: 0.5em;
    height: 2em;
    min-width: 125px;
    border: 1px solid #eee;
    border-left: 3px solid;
    border-radius: 4px;
    transition: border-color 0.5s ease-out;

    &:optional {
      border-left-color: #999;
    }
    &:required {
      border-left-color: red;
    }
    &:invalid {
      border-left-color: salmon;
    }
  }
}

JavaScript

function submitClick() {
 alert("Your data has been saved");
}

这是指向
在用户输入时您试图匹配的内容的链接？哪些
css
规则应该在哪些条件下应用？您可以通过HTML5输入获得大量免费验证。你们有并没有尝试过这些，看看它们是否满足你们的需求？我正在尝试添加两个不同的类，基于输入框中的内容，而不使用任何JS。似乎不可能做到这一点。@Sameer不可能将
.className
添加到
html
document
的
css
文件或使用
CSSOM
中的元素中。您可以使用
html
属性向用户提供有关预期输入的通知；根据正则表达式检查用户输入；根据用户输入匹配或不匹配的正则表达式模式呈现
css
内容。如果用户输入与
表单
元素的
模式
属性处的正则表达式不匹配，并且设置了
必需的
属性，而不使用
javascript
，则也可以阻止提交
元素。您需要使用
：valid
，
：在
css
和
pattern
属性和
必需的
属性的
伪选择器无效。除此之外，您尝试实现的功能目前无法单独使用
css
css
[att=value]
，
[att*=value]
和其他
css
属性选择器与
html
处的属性名称和值匹配，而不是表单字段中的当前用户输入。可以在
title
和
placeholder
属性处向用户提供有关预期有效输入的提示。