<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>注册表单验证</title>

     <style>

         #div1 {

             margin: 50px auto;

             width: 250px;

             height: 300px;

             background: cyan;

             text-align: center;

             padding: 50px;

         }

         #div1 input {

             width: 250px;

             height: 30px;

             margin: 20px 0;

             text-indent: 10px;

         }

         #div1 span {

             color: red;

         }

     </style>

     <script>

         window.onload = function(){

             var oUsername = document.getElementById('username');//获得文档节点

             var oUsernameSpan = document.getElementById('username_span');//获得文档节点

             oUsername.onblur = function(){

                 var oValue = oUsername.value.replace(/ /g, '');

                 oUsername.value = oValue;

                 if(!oValue){

                     oUsernameSpan.innerHTML = '用户名不能为空';

                 }else if(oValue.length < 6 || oValue.length > 18){

                     oUsernameSpan.innerHTML = '长度应为6~18个字符';

                 }else if(oValue[0] >= '0' && oValue[0] <= '9'){

                     oUsernameSpan.innerHTML = '邮件地址必需以英文字母开头';

                 }else if(!(isAbc(oValue))){

                     oUsernameSpan.innerHTML = '邮件地址需由字母、数字或下划线组成';

                 }else{

                     oUsernameSpan.innerHTML = '输入正确';

                 }

             }

         }

         //判断字符串是否都是字母数字下划线组成,

         function isAbc(str){

             var res = true;

             for(var i = 0; i < str.length; i++){

                 if(!(str[i] >= '0' && str[i] <= '9' || str[i] >= 'a' && str[i] <= 'z' ||str[i] >= 'A' && str[i] <= 'Z' || str[i] =='_')){

                     res = false;

                 }

             }

             return res;

         }

     </script>

 </head>

 <body>

     <div id="div1">

         <input type="text" id="username" placeholder="请输入用户名"><br>

         <span id="username_span">6~18个字符，可使用字母、数字、下划线，需以字母开头</span>

         <input type="text" id="password" placeholder="请输入密码">

     </div>

 </body>

 </html>

 <!DOCTYPE html>

 <html lang="en">

     <head>

         <meta charset="UTF-8">

         <title>Document</title>

         <style>

             #div1{width: 300px; height: 300px; border: 1px solid black; background-color: cyan; padding: 50px; text-align: center; margin: 100px auto;}

             #div1 input{width: 298px; height: 30px; font-size: 18px;margin-bottom: 10px; margin-top: 20px}

             #div1 span{color: red}

         </style>

         <script>

             window.onload = function(){

                 var oUsername = document.getElementById('username');

                 var oUsernameSpan = document.getElementById("username_span");

                 //失去焦点的时候判断

                 oUsername.onblur = function(){

                     //1、如果我们在输入的时候，不小心输入了空格，将空格祛除掉

                     var oValue = oUsername.value.replace(/ /ig, "");

                     oUsername.value = oValue;

                     //2、如何对用户名进行验证

                     if(!oValue){

                         oUsernameSpan.innerHTML = '用户名不能为空';

                     }else if(oValue.length > 18 || oValue.length < 6){

                         oUsernameSpan.innerHTML = "长度应为6~18个字符";

                     }else if(oValue[0] >= "0" && oValue[0] <= "9"){

                         oUsernameSpan.innerHTML = "邮件地址必需以英文字母开头";

                     }else{

                         //判断每一个字符都符合要求

                         var isYes = true; //假设用户名是正确的

                         for(var i = 0; i < oValue.length; i++){

                             if(!isABC(oValue[i])){

                                 isYes = false;

                                 break;

                             }

                         }

                         if(isYes){

                             oUsernameSpan.innerHTML = "输入正确✅";

                         }else{

                             oUsernameSpan.innerHTML = '邮件地址需由字母、数字或下划线组成';

                         }

                     }

                 }

             }

             //判断一个字符是否是数字、字母、下划线

             function isABC(charStr){

                 if(charStr >= "A" && charStr <= "Z" || charStr >= "a" && charStr <= "z" || charStr >= "0" && charStr <= "9" || charStr == "_"){

                     return true;

                 }else{

                     return false;

                 }

             }

         </script>

     </head>

     <body>

         <div id = 'div1'>

             <input type="text" placeholder="请输入用户名" id = 'username'><br/>

             <span id = 'username_span'>6~18个字符，可使用字母、数字、下划线，需以字母开头</span><br/>

             <input type="password" placeholder="请输入密码">

         </div>

     </body>

 </html>