js案例：表单验证（正则表达式）

最新推荐文章于 2024-03-29 08:37:44 发布

东方求败、

最新推荐文章于 2024-03-29 08:37:44 发布

阅读量230

点赞数

分类专栏： javascript复习之路 # javascript基础文章标签：正则表达式 html javascript

本文链接：https://blog.csdn.net/wang_swa99er/article/details/120704037

版权

javascript复习之路同时被 2 个专栏收录

87 篇文章 1 订阅

订阅专栏

javascript基础

77 篇文章 1 订阅

订阅专栏

这个JavaScript代码示例展示了如何进行表单验证，包括检查用户名的长度、首字母是否为字母以及字符组成。同时，它还实现了密码强度的实时评估，根据密码包含的字符类型（数字、小写字母、大写字母）将其分为弱、中、强三个等级。此代码适用于前端开发中的用户输入验证和用户体验提升。

摘要由CSDN通过智能技术生成

js案例：表单验证（正则表达式）

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #div1{width: 200px;height: 200px;background-color: lightgray;border: 1px solid black;text-align: center;margin: auto;padding: 5%;}
        #div1 input{width: 200px;height: 30px;font-size: 18px;margin-top: 10px;}
        #div1 span{font-size: 16px;color: gray;}
        #div2 {height: 60px;}
        #div1 .testCode{width: 55px;height: 30px;line-height: 30px;background-color: gray;color: white; float: left;margin: 5px;}
    </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 oDiv3 = 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<oDiv3.length;i++){
                   oDiv3[i].style.backgroundColor = 'gray';
               }
               if(oValue.length >= 6)
               {
                   //开始密码强度验证
                   if(/^\d+$/.test(oValue) || /^[a-z]+$/.test(oValue) || /^[A-Z]+$/.test(oValue)){
                       oDiv3[0].style.backgroundColor = 'orange';
                   }else if(/\d/.test(oValue) && /[a-z]/.test(oValue) && /[A-Z]/.test(oValue)){
                        oDiv3[2].style.backgroundColor = 'orange';
                   }else {
                    oDiv3[1].style.backgroundColor = 'orange';
                   }
               }
           }


        }
    </script>
</head>
<body>
    <div id = 'div1'>
        <input id = 'username' type="text" placeholder="用户名" onblur="func();" />
        <div id = "div2"><span id ='username_span'>6-18个字符，可使用字母、数字、下划线、须以字母开头</span></div>
        <input id = 'password' type = "text" placeholder="密码"/>
        <div class = 'testCode'>弱</div>
        <div class = 'testCode'>中</div>
        <div class = 'testCode'>强</div>
    </div>
</body>
</html>