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

2023-10-03 19:39:16

<!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也是可以识别到的

码农公寓

相关文章