原理
表单元素中，有一个pattern属性，可以自定义正则表达式（如手机号、邮箱、身份证..）；valid伪类，可以匹配通过pattern验证的元素；invalid伪类则相反，可以匹配未通过pattern验证的元素。
（推荐教程：CSS入门教程）
html代码
布局很简单，input跟button是兄弟节点的关系，required属性是必填的意思，也就是输入的内容必须要验证通过；
立即学习“前端免费学习笔记（深入）”；
中网互连企业网站管理系统201106
下载
中网互连企业网站管理系统是专门针对企业而开发的一套功能强大的网站管理系统，使用成熟的ASP技术开发的动态网站系统。简单易用、功能强大，能让懂上网的人就能自助管理管理网站。三年的开发和几千用户使用验证，是一套可靠实用，稳定安全的企业网站，适合中小企业公司建站使用。 中网互连企业网站管理系统功能模块有：单页（如企业简介，联系内容等单页图文）、文章（新闻）列表、产品（图片、订单、规格说明等）、图片、下
css代码
这里用的是scss预处理器
input {
// 验证通过时按钮的样式
&:valid {
&~button {
pointer-events: all;
cursor: pointer;
&::after {
content: "提交:+1:"
}
}
}
// 验证不通过时按钮的样式
&:invalid {
&~button {
pointer-events: none; // 去除点击事件，让按钮无法点击
&::after {
content: "未通过验证:unamused:"
}
}
}
}相关视频教程推荐：css视频教程
