今天逛百度知道，回答問題，有人提問如何改變表單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的顯示和隱藏。
