修改HTML Form required验证的样式与提示文字

先看下网上提供的方案:

https://blog.csdn.net/web_xiaoling_notes/article/details/45920549

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

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

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

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

看以下是实例效果:

修改HTML Form required验证的样式与提示文字_第1张图片

修改HTML Form required验证的样式与提示文字_第2张图片 

修改HTML Form required验证的样式与提示文字_第3张图片 

你可能感兴趣的:(HTML,Javascript)