html5 required 验证显示信息到底应该怎么修改呢?修改的同时可否再美化一下，通过这个required判断来改变表单文本框的提示样式?本文小编就为您带来详细教程，希望对大家能够有所帮助。

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

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

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

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

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

/*===包含required的表单===*/

/* 无效 */

input:required:invalid{

CSS代码

}

/* 有效 */

input:required:valid{

CSS代码

}

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

以上便是小编为您带来的全部内容了，更多精彩内容敬请关注核弹头小游戏网。