如何实现HTML输入的验证消息

Question

我想帮助实现一个自定义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>```

Answer 1

使用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 />