css怎么实现表单验证

css怎么实现表单验证

本篇内容介绍了“css怎么实现表单验证”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

　　原理

　　表单元素中，有一个pattern属性，可以自定义正则表达式（如手机号、邮箱、身份证..）；valid伪类，可以匹配通过pattern验证的元素；invalid伪类则相反，可以匹配未通过pattern验证的元素。

　　html

　　布局很简单，input跟button是兄弟节点的关系，required属性是必填的意思，也就是输入的内容必须要验证通过；

　　<section class="container">

　　<input type="text" name="tel" placeholder="请输入手机号码" pattern="^1[3456789]\d{9}$" required><br>

　　<input type="text" name="smscode" placeholder="请输入验证码" pattern="\d{4}" required><br>

　　<button type="submit"></button>

　　</section>

　　css

　　这里用的是scss预处理器，结构清晰

　　input {

　　// 验证通过时按钮的样式

　　&:valid {

　　&&mdash;&mdash;button {

　　pointer-events: all;

　　cursor: pointer;

　　&::after {

　　content: "提交"

　　}

　　}

　　}

　　// 验证不通过时按钮的样式

　　&:invalid {

　　&&mdash;&mdash;button {

　　pointer-events: none; // 去除点击事件，让按钮无法点击

　　&::after {

　　content: "未通过验证"

　　}

　　}

　　}

　　}

“css怎么实现表单验证”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注恰卡编程网网站，小编将为大家输出更多高质量的实用文章！