我需要一些帮助来实现一个自定义的 HTML 输入消息框，当用户输入正确的输入时，它会直观地显示用户，例如当满足要求时从红色 x 变为绿色复选标记弹出消息框。我以前在其他网站上看到过这个，但谷歌搜索没有向我展示任何关于如何做的文章。这是我网站上当前的 HTML 代码；我也想要(如果有人有时间)正则表达式，因为该字段需要至少 1 个大写字母或符号(我有数字和长度)。我是初学者，但我知道答案可能涉及 JS，当然还有 CSS。再次感谢。
<label for="pw1">Password:</label>
<br>
<input id="pw1" name="pword" type="password" maxlength="16" title="Must Contain one of the Following: A Number, A Symbol, or An Uppercase Letter" pattern="(?=.*\d).{8,16}" required /><br>```
最佳答案
使用 CSS 很容易根据内容是否有效来设置元素样式 :valid和 :invalid伪类。
input:valid { border:2px solid green; }
input:invalid { border:2px solid red; }<label for="pw1">Password:</label>
<br >
<input id="pw1" name="pword" type="password" maxlength="16" title="Must Contain one of the Following: A Number, A Symbol, or An Uppercase Letter" pattern="(?=.*\d).{8,16}" required />关于javascript - 如何为 HTML 输入实现验证消息，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54906711/