css实现input表单验证
有没有办法只通过css来确定input标签是否有输⼊？
我有这个想法是因为我想完成⼀个⾃动补全的input部件，最基本的功能是：
如果input没有内容，这隐藏下拉框
反之，显⽰下拉框
我到了⼀个也许不是很完美的实现⽅案，描述中可能会有⼀些细微的区别，不过我还是很希望能做这个简单的分享
⾸先，我们构造⼀个简单的form表单，仅仅只有⼀个input
<form>
<label for="input">输⼊框</label>
<input type="text" id="input"/>
</form>
当输⼊⼀些值，我设置input的边框颜⾊为绿的，下⾯是⼀个例⼦:
gif
判断input是否为空
我通过html 表单验证去判断是否为空，所以，这⾥我使⽤了required属性
<form>
<label> Input </label>
<input type="text" name="input" id="input" required />
</form>
// valid：当input输⼊值也合法值时采⽤的样式
#input:valid{
border-color: green;
}
这时，当有输⼊的时候，input表现的很好，边框颜⾊也有了相应的变化：
gif
但是，这⾥有个问题，如果⽤户输⼊的是空格，那么边框颜⾊也会发⽣改变。
gif
原理上看，这种表现是正常的，因为输⼊框确实有了内容。
但是，实际上，我不想让空格来触发⾃动补全弹窗
所以这还不能满⾜我们的需求，我要做更细致的检查
进⼀步完善
html提供我们利⽤正则去验证输⼊框内容的属性:pattern，这⾥也尝试使⽤该属性来完善
因为想把空格视为⾮法输⼊，我使⽤\S+，这个很简单，匹配⼀个或者多个任何⾮空⽩字符
<form>
<label> Input </label>
<input type="text" name="input" id="input" required pattern="\S+"/>
</form>
使⽤这种⽅式，的确奏效了，如果⽤户输⼊空格，输⼊框没有任何变化
gif
但了个是，但是这个正则还是有问题，因为只允许输⼊⾮空⽩字符，所以你在任何位置输⼊空⽩都会导致输⼊框校验失败gif
这⾥可以使⽤其他的正则来匹配，⽐如\^\S+?.+
<form>
<label> Input </label>
<input type="text" name="input" id="input" required pattern="\S+.*"/>
</form>
input标签placeholder属性现在输⼊框可以和空格混合输⼊了！
但是如果当前校验失败，输⼊框没有任何提⽰，这很不友好！
但我写这篇⽂章的时候，有⼀个问题我不断思考，能不能只⽤css给⾮法验证也加⼀种样式？
输⼊⽆效
这⾥不能使⽤:invalid，因为有required字段，即使我们什么也不做，输⼊框也会有⾮正确状态的样式提⽰，这很奇怪。
查看了相关资源，我们可以使⽤:placeholder-shown来达到我们的⽬的
⼤概思路是：
增加placeholder
如果输⼊框如果⽤户输⼊了内容，但还不合法做⼀个处理
最后利⽤css的覆盖特性，添加⼀个当验证成功的样式处理
最终的css⼤概是这样
/* 当填充的时候展⽰红⾊，所以这⾥默认是校验失败 */
input:not(:placeholder-shown) {
border-color: hsl(0, 76%, 50%);
}
/* 当验证成功的时候，采⽤这个样式 */
input:valid {
border-color: hsl(120, 76%, 50%);
}
这⾥有⼀个⼩⼩的
总结
上⾯的内容就是如何只⽤css来提供⼀个基础表单验证功能，说是只⽤css，其实也利⽤的pattern能接受正则表达式，哈哈，所以最根本的是如何写出最优的正则表达式。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。