先看下网上提供的方案：
https://blog.csdn.net/web_xiaoling_notes/article/details/45920549
如果只是最简单的非空验证，如下代码可以解决：
<input type="text" name="user_name" required oninvalid="setCustomValidity('不能为空')" οninput="setCustomValidity('')" />
如果想更为复杂，更多逻辑判断，js代码不写到html里面，可以参考《财付通的一篇文章》。
如果想判断的时候，改变文本框样式、加验证小图标什么的，可以用到这几个CSS伪类：
/*===包含required的表单===*/
/* 无效 */
input:required:invalid{
CSS代码
}
/* 有效 */
input:required:valid{
CSS代码
}
