注册页验证

最新推荐文章于 2022-11-22 10:34:00 发布

吴机智

最新推荐文章于 2022-11-22 10:34:00 发布

阅读量61

点赞数

分类专栏：案例文章标签： js

本文链接：https://blog.csdn.net/m0_49893750/article/details/108528305

版权

案例专栏收录该内容

45 篇文章 0 订阅

订阅专栏

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    span {
        color: red;
    }

    i {
        display: none;
    }

    .i1 {
        color: red;
    }

    .i2 {
        color: green;
    }
</style>

<body>
    <form action="">
        请输入账号：<input type="text" name="user"><i class="i1">正确</i><span>*</span>用户名以字母开头，必须字母和数字的组合
        <br>
        请输入密码：<input type="password" name="pass"><i class="i1">正确</i><span>*</span>必须数字和字母的组合 5-10 <br>
        请输入手机号 ：<input type="text" name="tet"><i class="i1">正确</i><br>
        请输入邮箱：<input type="text" name="email"><i class="i1">正确</i><br>
        <button>提交</button>
        <br>
    </form>
    <script>
        // 效果: 每个输入框失去焦点的时候，根据对应的正则，判断输入的内容是否正确
        var inps = document.getElementsByTagName('input');
        var is = document.getElementsByTagName('i');
        // 用户名以字母开头，必须字母和数字的组合
        var user = /(?!^[a-zA-Z]{6,20}$)^[a-zA-Z][a-zA-Z0-9]{5,19}$/;
        // 必须数字和字母的组合 5-10
        var pass = /(?!^[a-zA-Z]{5,10}$)(?!^[0-9]{5,10}$)^[a-zA-Z0-9]{5,10}$/;
        var phone = /^1[3456789]\d{9}$/;
        var email = /^\w{3,}@[a-zA-Z0-9]{2,}\.[a-zA-Z]{2,}$/;
        var regArr = [user, pass, phone, email];
        // 每个输入框
        for (var i = 0; i < inps.length; i++) {
            (function (s) {
                inps[s].onblur = function () {
                    console.log(this.value);
                    console.log(s);
                    console.log(regArr[s]);
                    is[s].style.display = 'inline-block';
                    if(regArr[s].test(this.value) == true){
                        is[s].innerHTML = '正确';
                        is[s].style.color = 'green';
                    } else {
                        is[s].innerHTML = '错误';
                        is[s].style.color = 'red';
                    }
                }
            })(i);
        }
    </script>
</body>

</html>

吴机智

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
注册页验证

<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><style> span { color: red; ...
复制链接

扫一扫

专栏目录