css怎么实现表单验证
本篇内容介绍了“css怎么实现表单验证”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!
创新互联专业提供遂宁托管服务器服务,为用户提供五星数据中心、电信、双线接入解决方案,用户可自行在线购买遂宁托管服务器服务,并享受7*24小时金牌售后服务。
原理
表单元素中,有一个pattern属性,可以自定义正则表达式(如手机号、邮箱、身份证..);valid伪类,可以匹配通过pattern验证的元素;invalid伪类则相反,可以匹配未通过pattern验证的元素。
html
布局很简单,input跟button是兄弟节点的关系,required属性是必填的意思,也就是输入的内容必须要验证通过;
css
这里用的是scss预处理器,结构清晰
input {
// 验证通过时按钮的样式
&:valid {
&——button {
pointer-events: all;
cursor: pointer;
&::after {
content: "提交"
}
}
}
// 验证不通过时按钮的样式
&:invalid {
&——button {
pointer-events: none; // 去除点击事件,让按钮无法点击
&::after {
content: "未通过验证"
}
}
}
}
“css怎么实现表单验证”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站,小编将为大家输出更多高质量的实用文章!
当前名称:css怎么实现表单验证
网站地址:http://myzitong.com/article/ppigjh.html