DOM实现用户名和密码验证的错误和正确提示

最新推荐文章于 2022-05-20 15:41:49 发布

HeWar_

最新推荐文章于 2022-05-20 15:41:49 发布

阅读量307

点赞数 1

分类专栏： HTML DOM JS 文章标签： html html5 css dom js

本文链接：https://blog.csdn.net/HeWar_/article/details/120781277

版权

JS 同时被 3 个专栏收录

30 篇文章 1 订阅

订阅专栏

HTML

6 篇文章 0 订阅

订阅专栏

DOM

5 篇文章 0 订阅

订阅专栏

此博客展示了一个HTML表单，用于添加管理员，包含姓名和密码字段。当输入失去焦点时，JavaScript会检查用户名是否由10个字符以内的字母/数字或下划线组成，以及密码是否为6个数字。验证通过时，显示正确图标；否则，显示错误提示。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        td>span{
            color: red;
        }
        .ok{
            background: url('./images/ok.png') no-repeat center;
            width: 20px;
            height: 30px;
            display: none;
        }
        .err{
            background: url('./images/err.png') no-repeat center left;
            padding-left: 20px;
            border: 1px solid red;
            background-color: lightgray;
            padding: 3px;
            padding-left: 20px;
            border-radius: 3px;
            display: none;
        }
    </style>
</head>
<body>
    <h2>增加管理员</h2>
    <!-- table>(tbody>tr*2>td*3)+(tfoot>tr>td*3) -->
    <table>
        <tbody>
            <tr>
                <td>姓名:</td>
                <td>
                    <input type="text">
                </td>
                <td><span>*</span></td>
                <td>
                    <div class="ok uname"></div>
                    <div class="err uname">10个字符以内的字母/数字或下划线的组合</div>
                </td>
            </tr>
            <tr>
                <td>密码:</td>
                <td>
                    <input type="password">
                </td>
                <td><span>*</span></td>
                <td>
                    <div class="ok pwd"></div>
                    <div class="err pwd">必须为6个数字</div>
                </td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td></td>
                <td colspan="2">
                    <button type="submit">保存</button>
                    <button type="reset">重填</button>
                </td>
            </tr>
        </tfoot>
    </table>
    <script>
        //1.为用户名输入框添加blur事件的监听:失去焦点
        //属性名选择器:代表选择属性名type='text'的元素
        let input_name=document.querySelector("[type='text']");
        console.log(input_name);
        input_name.onblur=function(){
            console.log("用户名输入框失去焦点");
            let reg_name=/^\w{1,10}$/;
            //查找ok和err
            //.ok.uname:代表class="ok uname"同时又两种样式
            let div_ok=document.querySelector(".ok.uname")
            let div_err=document.querySelector(".err.uname")
            
            //2.检查用户名是否符合要求:字母数字下划线 最多十个
            if(reg_name.test(this.value)){
                console.log(this.value,"符合要求");
                div_ok.style.display="block";//显示正确
                div_err.style.display="none";//不显示错误
            }else{
                console.log(this.value,"不符合要求");
                div_ok.style.display="none";//不显示正确
                div_err.style.display="block";//显示错误
            }
        }

        let input_pwd=document.querySelector("[type='password']");
        console.log(input_pwd);
        input_pwd.onblur=function(){
            console.log("失去焦点");
            let reg_pwd=/^\d{6}$/;
            //查找ok pwd
            let div_ok=document.querySelector(".ok.pwd")
            let div_err=document.querySelector(".err.pwd")
            if(reg_pwd.test(this.value)){
              div_ok.style.display="block";
              div_err.style.display="none";
            }else{
                 div_err.style.display="block";
                div_ok.style.display="none";
               
            }
        }
    </script>
</body>
</html>

HeWar_

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
DOM实现用户名和密码验证的错误和正确提示

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>...
复制链接

扫一扫

专栏目录