【CSS】验证表单元素

￡神魔★判官ぃ 2021-10-18 06:34 297阅读 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>

--------------------

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

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

--------------------

![在这里插入图片描述][20190812143057588.gif]

[20190812143057588.gif]: /images/20211018/1d505d4eda3a412fb25a6011828b5082.png

发表评论取消回复

表情：

评论列表（有 0 条评论，297人围观）

还没有评论，来说两句吧...

相关阅读

相关纯CSS实现表单验证

目录目录引言案例欣赏知识解析 required和optional in-range和out-

一时失言乱红尘/ 2022年08月06日 15:04/ 0 赞/ 186 阅读

相关表单验证

应用一、引入 <script src="Scripts/jquery-1.7.1.min.js"></script> <script src="Scripts/jqu

朱雀/ 2022年07月24日 06:28/ 0 赞/ 457 阅读

相关表单验证

java script验证表单时常用： "^-\[0-9\]\\[1-9\]\[0-9\]\＄"　　//负整数 "^-?//d+＄"　　　　//整

ゝ一纸荒年。/ 2022年06月13日 07:54/ 0 赞/ 294 阅读

相关表单验证

@Min(value = 18, message = " 不得小于18 ") private Integer age; / 表单验证 /

╰+攻爆jí腚メ/ 2022年06月05日 10:15/ 0 赞/ 283 阅读

相关表单验证

angularjs 表单验证，包含必填、手机、邮箱、ip、网址等基于angularjs自己封装的验证插件，之前的插件在angularjs上就不能使用了，然后将之前的封

淩亂°似流年/ 2022年06月04日 10:14/ 0 赞/ 285 阅读

相关 CSS优化表单元素样式

<%@ page language="java" import="java.util." pageEncoding="UTF-8"%> <% Strin

男娘i/ 2022年05月25日 00:26/ 0 赞/ 198 阅读

相关表单验证

表单验证为了减轻服务器的压力，请求次数减少，保证用户输入符合要求。 > 常用的表单验证 > \- 日期样式 > \- 表单内容是否为空 > \- 用户名和密码

梦里梦外;/ 2022年05月24日 04:40/ 0 赞/ 296 阅读

相关表单验证

代码虽然有重复，但是重要的是思想和正则表达式的用 ---------- <!DOCTYPE html>

痛定思痛。/ 2022年05月19日 06:35/ 0 赞/ 328 阅读

相关表单验证

java script验证表单时常用： "^-\[0-9\]\\[1-9\]\[0-9\]\＄"　　//负整数 "^-?//d+＄"　　　　//整

小灰灰/ 2022年01月07日 14:35/ 0 赞/ 431 阅读

相关【CSS】验证表单元素

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

￡神魔★判官ぃ/ 2021年10月18日 06:34/ 0 赞/ 298 阅读