Question

我需要一些帮助来实现自定义HTML输入消息框，当用户输入正确的输入时，它会在视觉上向用户显示，例如当满足要求时，从红色x变为绿色复选标记。弹出消息框。我以前在其他网站上已经看到过这种情况，但是Google搜索没有向我显示任何有关这样做的文章。这是我当前在网站上的HTML代码；我还想（如果有时间的话）正则表达式需要至少1个大写字母或符号（我有数字和长度）的正则表达式。我是一个初学者，但我知道答案可能涉及JS和CSS。再次感谢。

<fieldset class="editor" contenteditable='true'></fieldset>
<textarea class='insert'style='min-width:98%'></textarea>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

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

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

1 个答案: