使用js实现简单版用户登录表单验证

2022-01-20 15:35:02 阅读：156 来源： 互联网

标签：qq document 登录 nextElementSibling 表单 querySelector var regexp js

<!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>
    <script src="../表单验证/reg.js"></script>
    <style>
        li {
            list-style: none;
        }
        
        input {
            outline: none;
            height: 30px;
            width: 180px;
        }
        
        label {
            display: inline-block;
            width: 100px;
            margin-top: 20px;
        }
        
        .right {
            color: green;
        }
        
        .wrong {
            color: red;
        }
        
        img {
            width: 20px;
            height: 20px;
        }
    </style>
</head>

<body>
    <ul>
        <li>
            <label for=" ">手机号码:</label>
            <input type="text" class="ipt" id="num">
            <span></span>
        </li>
        <li>
            <label for=" ">qq: </label>
            <input type="text" class="ipt" id="qq">
            <span></span>
        </li>
        <li>
            <label for=" ">昵称: </label>
            <input type="text" class="ipt" id="uname">
            <span></span>
        </li>
        <li>
            <label for=" ">短信验证码: </label>
            <input type="text" class="ipt" id="msg">
            <span></span>
        </li>
        <li>
            <label for=" ">输入密码: </label>
            <input type="text" class="ipt" id="pwd">
            <span></span>
        </li>
        <li>
            <label for=" ">确认密码: </label>
            <input type="text" class="ipt" id="surepwd">
            <span></span>
        </li>
    </ul>
</body>

</html>

window.onload = function() {
    var num = document.querySelector('#num');
    var qq = document.querySelector('#qq');
    var uname = document.querySelector('#uname')
    var msg = document.querySelector('#msg');
    var pwd = document.querySelector('#pwd');
    var surepwd = document.querySelector('#surepwd');
    //正则表达式
    var regtel = /^1[34578]\d{9}$/; //手机号码
    var regqq = /^[1-9]\d{4,}$/; //qq
    var reguname = /^[\u4e00-\u9fa5]{2,8}$/; //名字 2-8个中文！
    var regmsg = /^\d{6}$/; //短信验证码 只能6位数
    var regpwd = /^[a-zA-Z0-9]{6,16}$/; //密码 6-16位

    regexp(num, regtel); //调用
    regexp(qq, regqq);
    regexp(uname, reguname);
    regexp(msg, regmsg);
    regexp(pwd, regpwd);

    //封装了正则表达式函数 ele代表要用的是谁 reg表正则表达式
    function regexp(ele, reg) {
        ele.onblur = function() {
            if (reg.test(this.value)) {
                console.log('正确');
                this.nextElementSibling.className = 'right'
                this.nextElementSibling.innerHTML = '<img src="../img/right.png" alt=""> 格式正确'
            } else {
                console.log('错误');
                this.nextElementSibling.className = 'wrong'
                this.nextElementSibling.innerHTML = '<img src="../img/wrong.png" alt=""> 格式错误'

            }
        }
    }
    //确认密码和密码 输入一致才可显示正确
    surepwd.onblur = function() {
        if (this.value == pwd.value) {
            console.log('正确');
            this.nextElementSibling.className = 'right'
            this.nextElementSibling.innerHTML = '<img src="../img/right.png" alt=""> 格式正确'

        } else {
            console.log('错误');
            this.nextElementSibling.className = 'wrong'
            this.nextElementSibling.innerHTML = '<img src="../img/wrong.png" alt=""> 两次密码输入不一致'

        }
    }

}

关于在js里放图片是因为innerhtml可以识别html标签我没对图片样式进行修改如果要修改的情况下可以把代码中的img标签换成修改后的某个标签如<i class="icon"></i> html也是可以识别到的

标签：qq,document,登录,nextElementSibling,表单,querySelector,var,regexp,js
来源： https://blog.csdn.net/weixin_57607714/article/details/122602557

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

使用js实现简单版用户登录表单验证