js正则表达--表单验证

最新推荐文章于 2024-07-14 12:31:08 发布

CoolPomelo

最新推荐文章于 2024-07-14 12:31:08 发布

阅读量68

点赞数

分类专栏： js 文章标签： css html css3 javascript

本文链接：https://blog.csdn.net/yuan_1216/article/details/130875099

版权

js 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<style>
    * {
        margin: 0 auto;
        padding: 0;
    }

    form {
        width: 350px;
        height: 400px;
    }

    p span {
        display: inline-block;
        width: 80px;
        height: 22px;
        text-align: right;
    }

    p input {
        width: 220px;
        height: 20px;
        outline: none;
        border: none;
        border-bottom: 1px dashed black;
        margin-top: 10px;
        font-size: 10px;
    }

    p:nth-last-child(2) {
        width: 200px;
    }

    p:last-child {
        text-align: center;
    }

    p #code {
        float: left;
        margin-top: 10px;
        background-color: rgba(128, 128, 128, 0.514);
        text-align: center;
    }

    p #myCode {
        float: right;
        width: 80px;
        text-align: center;
    }
</style>

<body>
    <form action="">
        <p><span>用户名：</span><input type="text" id="username" placeholder="字母数字下划线组成，首字母不能为数字"></p>
        <p><span>密码：</span><input type="password" id="psw" placeholder="密码长度6-12位"></p>
        <p><span>确认密码：</span><input type="password" id="psw2" placeholder="请再次输入密码"></p>
        <p><span id="code"></span><input type="text" id="myCode" placeholder="不区分大小写"></p>
        <p><input type="button" value="注册" id="btn"></p>
    </form>


    <script>
        var username = document.getElementById('username');
        var psw = document.getElementById('psw');
        var psw2 = document.getElementById('psw2');
        var code = document.getElementById('code');
        var myCode = document.getElementById('myCode');
        var btn = document.getElementById('btn');
        var judgeName = false, judgePsw = false, judgePsw2 = false, judeCode = false;
        //用户名 首字母不能是数字，数字字母下划线组成
        var nameRule = /^[a-zA-Z_][\w]{0,}$/;
        username.addEventListener('change', function () {
            // console.log(this.value);
            if (nameRule.test(this.value)) {
                this.style.backgroundColor = 'green';
                judgeName = true;
            } else {
                this.style.backgroundColor = 'red';
                judgeName = false;
            }
        });
        //密码6-12位
        var pswRule = /^[\w\W]{6,12}$/;
        var psw0 = '';
        psw.addEventListener('change', function () {
            psw0 = this.value;
            if (pswRule.test(this.value)) {
                this.style.backgroundColor = 'green';
                judgePsw = true;
            } else {
                this.style.backgroundColor = 'red';
                judgePsw = false;
            }
        });
        //再次输入密码是否一致
        psw2.addEventListener('change', function () {
            // var psw2Rule =/psw0/;
            if (psw0 == this.value) {
                this.style.backgroundColor = 'green';
                judgePsw2 = true;
            } else {
                this.style.backgroundColor = 'red';
                judgePsw2 = false;
            }
        });
        //验证码
        var newCodeStr = '';
        for (var i = 48; i <= 57; i++) {
            newCodeStr += String.fromCharCode(i);
        }
        for (var i = 65; i <= 90; i++) {
            newCodeStr += String.fromCharCode(i);
        }
        for (var i = 97; i <= 122; i++) {
            newCodeStr += String.fromCharCode(i);
        }
        // console.log(newCode);
        var newCode = '';
        createCode();
        function createCode () {
            newCode = '';
            for (var i = 0; i < 4; i++) {
                var num = Math.floor(Math.random() * newCodeStr.length);
                newCode += newCodeStr[num];
            }
            code.innerText = newCode;
        }
        //判断验证码
        myCode.addEventListener('change', function () {
            if (newCode.toLocaleLowerCase() == this.value.toLocaleLowerCase()) {
                this.style.backgroundColor = 'green';
                judeCode = true;
            } else {
                this.style.backgroundColor = 'red';
                judeCode = false;
            }
        });
        //注册按钮
        btn.addEventListener('click', function () {
            if (judeCode && judgeName && judgePsw && judgePsw2) {
                alert('登陆中...');
            } else {
                alert('请修改不合法数据！');
            }
        })
    </script>