【CSS】验证表单元素

最新推荐文章于 2022-01-22 15:57:36 发布

freedom_文

最新推荐文章于 2022-01-22 15:57:36 发布

阅读量239

点赞数 1

分类专栏： CSS form

本文链接：https://blog.csdn.net/freedomVenly/article/details/99300808

版权

CSS 同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

form

8 篇文章 0 订阅

订阅专栏


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #d1{width: 200px;margin:100px auto;}

        input{
            border: 1px solid #ccc;
        }

        input:valid {
            border-color: #2ED81C;
        }

        input:invalid  {
            border-color: #e4393c;
        }
        #btn{

        }

        input:valid ~ #btn:after {
            content: "输入正确，可提交"
        }


        input:invalid ~ #btn:after {
            content: "填写内容不合规"
        }

    </style>
</head>
<body>


<div id="d1">
    <input type="text" name="name" placeholder="姓名" pattern="^[\u0391-\uFFE5]+$" required> <br>

    <input type="text" name="tel" placeholder="手机号码" pattern="\d{11}" required>

    <input type="text" name="tel" placeholder="电子邮箱" pattern="\w+@[a-zA-Z0-9]{2,}(.[a-zA-Z0-9]{2,3}){1,2}" required>

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

</div>
</body>
</html>

验证成功时：边框绿色，按钮提示：输入正确，可提交，

验证错误时：边框红色，按钮提示：填写内容不合规，

在这里插入图片描述