今天逛百度知道，回答问题，有人提问如何改变表单required的提示文字。慢慢研究开，发现除了非空外验证外，配合正则，HTML5的验证能力还是很强大的。不过转念一想，可否再美化一下，通过这个required判断来改变表单文本框的提示样式？搜了好久，国人都没写过，发现国外友人倒是写了，拿过来参考一下吧。
首先是改变提示文字。默认的文字是“请填写此字段”和“请匹配要求的格式”，如下图：
如果只是最简单的非空验证，如下代码可以解决：
```
<input type="text" name="user_name"
required oninvalid="setCustomValidity('不能为空')" oninput="setCustomValidity('')" />
```
如果想更为复杂，更多逻辑判断，js代码不写到html里面，可以参考[《财付通的一篇文章》](http://tid.tenpay.com/?p=3592)。
如果想判断的时候，改变文本框样式、加验证小图标什么的，可以用到这几个CSS伪类：
```
/*===包含required的表单===*/
/* 无效 */
input:required:invalid{
CSS代码
}
/* 有效 */
input:required:valid{
CSS代码
}
```
更直观请看 http://www.the-art-of-web.com/html/html5-form-validation/
我只是做了最简单的背景图和边框颜色。当然如果你还可以放个span在表单后面，警告为红色字，通过相邻选择符(E+F)来控制后面的span的显示和隐藏。
