js案例:表单验证(正则表达式)

js案例:表单验证(正则表达式)

代码:

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <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>

你可能感兴趣的:(javascript复习之路,#,javascript基础,正则表达式,html,javascript)