正则实现简单表单验证

最新推荐文章于 2024-09-13 08:33:26 发布

呼啦_

最新推荐文章于 2024-09-13 08:33:26 发布

阅读量105

点赞数

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

本文链接：https://blog.csdn.net/weixin_44217882/article/details/116425552

版权

JavaScript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

实现效果图：
在这里插入图片描述
利用正则表达式判断用户名称是否合法，并判断输入密码强度

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>

        <style>
            #div1{width: 250px;
                height: 250px;
                border: 1px solid black;
                padding: 50px;
                text-align: center;
                margin: 100px auto;
                background-color: lightgray}
            #div1 input{width: 250px; height: 30px; font-size: 18px; margin-top: 20px}
            #div1 span{margin-top: 5px; font-size: 14px; color: gray}
            #div1 .testCode{width: 70px; 
                        height: 30px; 
                        line-height: 30px; 
                        background-color: gray; 
                        color: white; 
                        float: left; 
                        margin-left: 12px;
                        margin-top: 10px}
        </style>

        <script>
            window.onload = function(){
                var oUsername = document.getElementById("username");
                var oUsername_span = document.getElementById("username_span");
                var oPassword = document.getElementById("password");
                var oDiv1 = document.getElementById("div1");
                var aDivs = oDiv1.getElementsByClassName("testCode");

                //添加失去焦点事件
                oUsername.onblur = function(){
                    var oValue = oUsername.value;
                    //1.用户名长度是否符合要求
                    if(oValue.length < 6 || oValue.length > 18){
                        oUsername_span.innerHTML = "❗️长度应为6~18个字符";
                        oUsername_span.style.color = "red";
                    }else if(!/[a-zA-Z]/.test(oValue[0])){
                        oUsername_span.innerHTML = "❗️邮件地址必须以英文字母开头";
                        oUsername_span.style.color = "red";
                    }else if(/\W/.test(oValue)){
                        oUsername_span.innerHTML = "❗️邮件地址需由字母、数字、下划线组成";
                        oUsername_span.style.color = "red";
                    }else{
                        oUsername_span.innerHTML = "✅该用户名可注册";
                        oUsername_span.style.color = "green";
                    }
                }

                //给密码输入框添加键盘事件
                /* 
                    keydown事件触发的时间是文本输入之前 
                    keyup

                    密码强度归类：
                    1、弱   纯数字、纯小写、纯大写
                    2、中   两两混合
                    3、强   三种都有
                */
                oPassword.onkeyup = function(){
                    var oValue = this.value;

                    //每次触发之前，都要将上一次样式全部清空
                    for(var i = 0; i < aDivs.length; i++){
                        aDivs[i].style.backgroundColor = 'gray';
                    }

                    if(oValue.length >= 6){
                        if(/^\d+$/.test(oValue) || /^[a-z]+$/.test(oValue) || /^[A-Z]+$/.test(oValue)){
                            aDivs[0].style.backgroundColor = "orange";
                        }else if(/\d/.test(oValue) && /[a-z]/.test(oValue) && /[A-Z]/.test(oValue)){
                            aDivs[2].style.backgroundColor = "orange";
                        }else{
                            aDivs[1].style.backgroundColor = "orange";
                        }
                    }
                }
            }
        </script>

    </head>
    <body>
        <div id="div1">
            <input id="username" type="text" placeholder="用户名">
            <span id="username_span">6~8个字符，可使用字母、数字、下划线，需以字母开头</span>
            <input id="password" type="text" placeholder="密码">
            <div class="testCode">弱</div>
            <div class="testCode">中</div>
            <div class="testCode">强</div>
        </div>
    </body>
</html>