HTML5表单required验证修改文字和样式

今天逛百度知道,回答问题,有人提问如何改变表单required的提示文字。慢慢研究开,发现除了非空外验证外,配合正则,HTML5的验证能力还是很强大的。不过转念一想,可否再美化一下,通过这个required判断来改变表单文本框的提示样式?搜了好久,国人都没写过,发现国外友人倒是写了,拿过来参考一下吧。

首先是改变提示文字。默认的文字是“请填写此字段”和“请匹配要求的格式”,如下图:

验证图片

如果只是最简单的非空验证,如下代码可以解决:

<input type="text" name="user_name" required oninvalid="setCustomValidity('不能为空')" oninput="setCustomValidity('')" />

如果想更为复杂,更多逻辑判断,js代码不写到html里面,可以参考《财付通的一篇文章》。

如果想判断的时候,改变文本框样式、加验证小图标什么的,可以用到这几个CSS伪类:

/*===包含required的表单===*/
/* 无效 */
input:required:invalid{
    CSS
}
/* 有效 */
input:required:valid{
    CSS
}

更直观请看→DEMO

验证

我只是做了最简单的背景图和边框颜色。当然如果你还可以放个span在表单后面,警告为红色字,通过相邻选择符(E+F)来控制后面的span的显示和隐藏。

参考文章:http://www.the-art-of-web.com/html/html5-form-validation/

本文出自 1号店UED ,转载时请注明出处

« CSS优化图片未加载时的布局小技巧

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值