注册界面的实时验证

╰半夏微凉° 2024-02-18 22:39 110阅读 0赞

转载自：https://blog.csdn.net/jianzhonghao/article/details/60781741
今天研究了网易用户注册的表单，以及其及时验证，本真人不得不说无论是它的布局结构还是其风骚的“弹出式加载验证”都是让人眼前一亮，居然还可以这样玩！…
这里写图片描述
html代码：

  1. <!--logo位置-->
  2. <div id="header"><img src="img/register_logo.png" alt="logo"/></div>
  3. <div id="main">
  4. <table width="100%" border="0" cellpadding="0"  cellspacing="0">
  5. <!--看不见的第一行-->
  6. <tr>
  7.     <td class="bg bg_top_left"></td>
  8.     <td class="bg_top"></td>
  9.     <td class="bg bg_top_right"></td>
  10. </tr>
  11. <!--看得见的第二行-->
  12. <tr>
  13.     <td class="bg_left"></td>
  14.     <td class="content">
  15.     <!--表单提交，因本真人是解析来着，算不出网易服务器地址，就不详细介绍了-->
  16.     <form action="" method="post" name="myform" onsubmit="return checkForm()">
  17.         <!--居然采用自定义列表，嘿嘿-->
  18.         <dl>
  19.             <dt>通行证用户名：</dt>
  20.             <dd><input type="text" id="userName" class="inputs userWidth" onfocus="userNameFocus()" onblur="userNameBlur()"/>@163.com</dd>
  21.             <div id="userNameId"></div><!--这里当做提示框！-->
  22.         </dl>
  24.         <dl>
  25.             <dt>登录密码：</dt>
  26.             <dd><input type="password" id="pwd" class="inputs" onfocus="pwdFocus()" onblur="pwdBlur()"/></dd>
  27.             <div id="pwdId"></div>
  28.         </dl>
  30.         <dl>
  31.             <dt>重复登录密码：</dt><!--这里只有onblur:用户使用逻辑使然-->
  32.             <dd><input type="password" id="repwd" class="inputs" onblur="repwdBlur()"/></dd>
  33.             <div id="repwdId"></div>
  34.         </dl>
  36.         <dl>
  37.             <dt>性别：</dt><!--性别这里居然不给设置验证，就一个默认，本真人有点不服-->
  38.             <dd><input type="radio" name="sex" value="男" checked="checked"/>男
  39.                 <input type="radio" name="sex" value="女" />女
  40.             </dd>                           
  41.         </dl>
  43.         <dl>
  44.             <dt>真实姓名：</dt><!--aa():这名字,本真人有点醉...-->
  45.             <dd><input type="text" id="realName" class="inputs" onblur="aa()"/></dd>
  46.             <div id="userNameId"></div>
  47.         </dl>
  49.         <dl>
  50.             <dt>昵称：</dt><!--解析到这里本真人终于明白了为什么有些input没有onfocus:有onfocus的是为了让表单上弹出，本真人一直认为很风骚的提示！-->
  51.             <dd><input type="text" id="nickName" class="inputs" onfocus="nickNameFocus()" onblur="nickNameBlur()"/></dd>
  52.             <div id="nickNameId"></div>
  53.         </dl>
  55.         <dl>
  56.             <dt>关联手机号：</dt>
  57.             <dd><input type="text" id="tel" class="inputs" onfocus="telFocus()" onblur="telBlur()"/></dd>
  58.             <div id="telId"></div>
  59.         </dl>
  61.         <dl>
  62.             <dt>保密邮箱：</dt>
  63.             <dd><input type="text" id="email" class="inputs" onfocus="emailFocus()" onblur="emailBlur()"/></dd>
  64.             <div id="emailId"></div>
  65.         </dl>
  67.         <dl>
  68.             <dt></dt><!--输入框为image类型的还真不常见-->
  69.             <dd><input name=" " type="image" src="img/button.png"/></dd>
  70.         </dl>
  72.     </form>
  73.     </td>
  75.     <td class="bg_right"></td>
  76. </tr>
  77. <!--看不见的第三行-->
  78. <tr>
  79.     <td class="bg bg_end_left"></td>
  80.     <td class="bg bg_end"></td>
  81.     <td class="bg bg_end_right"></td>
  82. </tr>
  83. </table>
  84. </div>

css样式：（style1.css）

  1. @charset "utf-8";
  2. /*基础部分*/
  3. body,dl,dt,dd,div,form{
  4.     padding: 0;margin: 0;}
  5. #header,#main{
  6.     width:650px;
  7.     margin:0 auto;
  8.     background-color: #CCE8CF;
  9.     }
  10. /*看不见的第一行*/
  11. /*这种风骚结构是本真人第一次见到，不得不说，让本真人眼前一亮*/
  12. .bg{
  13.     /*background-image: url(../img/register_logo.gif);*/
  14.     background-repeat: no-repeat;
  15.     width: 6px;
  16.     height: 6px;
  17.     }
  18.     /*表格：第一行*/
  19.     .bg_top_left{
  20.         background-position: 0px 0px;
  21.     }
  22.     .bg_top_right{
  23.         background-position: 0px -6px;
  24.     }
  25.     .bg_top{
  26.         border-top: solid 1px #666666;
  27.     }
  28.     /*表格：第三行*/
  29.     .bg_end{
  30.         border-bottom: solid 1px #666666;
  31.     }
  32.     .bg_end_left{
  33.         background-position: 0px -12px;
  34.     }
  35.     .bg_end_right{
  36.         background-position: 0px -18px;
  37.     }
  38.     /*表格：第二行*/
  39.     .bg_left{
  40.         border-left: solid 1px #666666;
  41.     }
  42.     .bg_right{
  43.         border-right: solid 1px #666666;
  44.     }
  45. /*第二行，第二列表单内容*/
  46. .content{
  47.     padding: 10px;
  48.     }
  49.     .inputs{
  50.         border: solid 1px #a4c8e0;
  51.         width: 150px;
  52.         height: 15px;
  53.     }
  54.     /*用户名独有*/
  55.     .userWidth{
  56.         width: 110px;
  57.     }
  58.     .content div{
  59.         float: left;
  60.         font-size: 12px;
  61.         color: #000;
  62.     }
  63.     dl{
  64.     /*待解释:这里让每个dl清浮动，像是为了让每个dl都相互独立！而不被第一个左浮动所影响变成一锅乱粥！*/
  65.         clear: both;
  66.     }
  67.     dt,dd{
  68.     /*浮动飘起来*/
  69.         float: left;
  70.     }
  71.     /*将dt设置成文字右对齐，用来代替表格，造成同样的效果，很好！*/
  72.     dt{
  73.         width: 130px;
  74.         text-align: right;
  75.         font-size: 14px;
  76.         height: 30px;
  77.         line-height: 25px;
  78.     }
  79.     dd{
  80.         font-size: 12px;
  81.         color: #666666;
  82.         width: 180px;
  83.         margin-left: 35px;
  84.     }
  85.     /*待解释*/
  86. /*当鼠标放到文本框时，提示文本的样式*/
  87. .import_prompt{
  88.     border:solid 1px #ffcd00;
  89.     background-color:#ffffda;
  90.     padding-left:5px;
  91.     padding-right:5px;
  92.     line-height:20px;
  93.     }
  94. /*当文本框内容不符合要求时，提示文本的样式*/
  95. .error_prompt{
  96.     border:solid 1px #ff3300;
  97.     background-color:#fff2e5;
  98.     background-image:url(../img/li_err.png);
  99.     background-repeat:no-repeat;
  100.     background-position:5px 2px;
  101.     padding:2px 5px 0px 25px;
  102.     line-height:20px;
  103.     }
  104. /*当文本框内容输入正确时，提示文本的样式*/
  105. .ok_prompt{
  106.     border:solid 1px #01be00;
  107.     background-color:#e6fee4;
  108.     background-image:url(../img/li_ok.png);
  109.     background-repeat:no-repeat;
  110.     background-position:5px 2px;
  111.     padding:2px 5px 0px 25px;
  112.     line-height:20px;
  113.     }

JS代码：

  1. /*通过ID获取HTML对象的通用方法，使用$代替函数名称*/
  2. function $(elementId){
  4.     //这玩意是用来模拟JQuery语法，吓得本真人差点看不懂。
  5.     return document.getElementById(elementId);
  6. }
  8. /*当鼠标放在通行证用户名文本框时，提示文本及样式*/
  9. function userNameFocus(){
  11.     var userNameId=$("userNameId");
  12.     /*提前在css中写好.import_prompt这个样式，通过className属性居然可以给div赋值class值！本真人法力大涨啊！*/
  13.     /*之所以不在一开始就给div设置此css样式，就是为了要在获取焦点时，提示它！所以说，通过这种方法，完美！*/
  14.     userNameId.className="import_prompt";
  15.     userNameId.innerHTML="1、由字母、数字、下划线、点、减号组成<br />2、只能以数字、字母开头或结尾，且长度为4-18";
  16. }
  18. /*当鼠标离开通行证用户名文本框时，提示文本及样式*/
  19. function userNameBlur(){
  21.     var userName=$("userName");
  22.     var userNameId=$("userNameId");
  23.     //这个正则表达式完美的解释了上面的文字提示！
  24.     var reg=/^[0-9a-zA-Z][0-9a-zA-Z_.-]{2,16}[0-9a-zA-Z]$/;
  25.     //这个是用户名为空的情况
  26.     if(userName.value==""){
  27.         userNameId.className="error_prompt";
  28.         userNameId.innerHTML="通行证用户名不能为空，请输入通行证用户名";
  29.         return false;/*有待解释*/
  30.     }
  31.     //这个是输入不合法的情况
  32.     if(reg.test(userName.value)==false){
  33.         userNameId.className="import_prompt";
  34.         userNameId.innerHTML="1、由字母、数字、下划线、点、减号组成<br />2、只能以数字、字母开头或结尾，且长度为4-18";
  35.         return false;
  36.     }
  37.     /*className:用的时候加载，不用的时候隐藏，这真是6的一逼啊！*/
  38.     userNameId.className="ok_prompt";
  39.     userNameId.innerHTML="通行证用户名输入正确";
  40.     return true;    
  41. }
  42. /*当鼠标放在密码文本框是，提示文本及样式*/
  43. function pwdFocus(){
  45.     var pwdId=$("pwdId");
  46.     pwdId.className="import_prompt";/*卧槽，一次书写，多次调用，本真人跪了！*/
  47.     pwdId.innerHTML="密码长度为6-16";
  48. }
  49. /*当鼠标离开密码文本框时，提示文本及样式*/
  50. function pwdBlur(){
  52.     var pwd=$("pwd");
  53.     var pwdId=$("pwdId");
  54.     if(pwd.value==""){
  55.         pwdId.className="error_prompt";
  56.         pwdId.innerHTML="密码不能为空，请输入密码";
  57.         return false;
  58.     }
  59.     if(pwd.value.length<6||pwd.value.length>16){
  60.         pwdId.className="error_prompt";
  61.         pwdId.innerHTML="密码长度为6-16";
  62.         return false;
  63.     }
  64.     pwdId.className="ok_prompt";
  65.     pwdId.innerHTML="密码输入正确";
  66.     return true;
  67. }
  69. /*当鼠标离开重复密码文本框时，提示文本及样式*/
  70. function repwdBlur(){
  72.     var pwd=$("pwd");
  73.     var repwd=$("repwd");
  74.     var repwdId=$("repwdId");
  75.     if(repwd.value==""){
  76.         pwdId.className="error_prompt";
  77.         pwdId.innerHTML="重复密码不能为空，请重复输入密码";
  78.         return false;
  79.     }
  80.     if(pwd.value!=repwd.value){
  81.         repwdId.className="error_prompt";
  82.         repwdId.innerHTML="两次输入的密码不一致，请重新输入";
  83.         return false;
  84.     }
  85.     repwdId.className="ok_prompt";
  86.     repwdId.innerHTML="两次密码输入正确";
  87.     return true;
  88. }
  89. /*当鼠标放在昵称文本框时，提示文本及样式*/    
  90. function nickNameFocus(){
  91.      /*这个验证在Html部分，写过了*/
  92.     var nickNameId=$("nickNameId");
  93.     nickNameId.className="import_prompt";
  94.     nickNameId.innerHTML="1、包含汉字、字母、数字、下划线以及@!#$%&*特殊字符<br/>2、长度为4－20个字符<br/>3、一个汉字占两个字符";
  95.     }
  96. /*当鼠标离开昵称文本框时，提示文本及样式*/    
  97. function nickNameBlur(){
  99.     var nickName=$("nickName");
  100.     var nickNameId=$("nickNameId");
  101.     var k=0;
  102.     var reg=/^([\u4e00-\u9fa5]|\w|[@!#$%&*])+$/;   // 匹配昵称(与错误提示真tm是一模一样！)
  103.     var chinaReg=/[\u4e00-\u9fa5]/g;   //匹配中文字符
  104.     if(nickName.value==""){
  105.         nickNameId.className="error_prompt";
  106.         nickNameId.innerHTML="昵称不能为空，请输入昵称";
  107.         return false;
  108.         }
  109.     if(reg.test(nickName.value)==false){
  110.         nickNameId.className="error_prompt";
  111.         nickNameId.innerHTML="只能由汉字、字母、数字、下划线以及@!#$%&*特殊字符组成";
  112.         return false;
  113.         }
  115.     var len=nickName.value.replace(chinaReg,"ab").length;  //把中文字符转换为两个字母，以计算字符长度
  116.     if(len<4||len>20){
  117.         nickNameId.className="error_prompt";
  118.         nickNameId.innerHTML="1、长度为4－20个字符<br/>2、一个汉字占两个字符";
  119.         return false;
  120.         }
  122.         nickNameId.className="ok_prompt";
  123.         nickNameId.innerHTML="昵称输入正确";
  124.         return true;
  125.     } 
  127. /*当鼠标放在关联手机号文本框时，提示文本及样式*/
  128. /*提示都是千篇一律，错误提示是各有不同啊！*/
  129. function telFocus(){
  131.     var telId=$("telId");
  132.     telId.className="import_prompt";
  133.     telId.innerHTML="1、手机号码以13，15，18开头<br/>2、手机号码由11位数字组成";
  134.     }
  135. /*当鼠标离开关联手机号文本框时，提示文本及样式*/    
  136. function telBlur(){
  138.     var tel=$("tel");
  139.     var telId=$("telId");
  140.     //13,15,18开头就长这德行，加上后面的任意9位，凑成11位，啧啧，每次看正则表达式，本真人都是醉了！
  141.     var reg=/^(13|15|18)\d{9}$/;
  142.     if(tel.value==""){
  143.         telId.className="error_prompt";
  144.         telId.innerHTML="关联手机号码不能为空，请输入关联手机号码";
  145.         return false;
  146.         }
  147.     if(reg.test(tel.value)==false){
  148.         telId.className="error_prompt";
  149.         telId.innerHTML="关联手机号码输入不正确，请重新输入";
  150.         return false;
  151.         }
  152.         telId.className="ok_prompt";
  153.         telId.innerHTML="关联手机号码输入正确";
  154.         return true;
  155.     }   
  157. /*当鼠标放在保密邮箱文本框时，提示文本及样式*/
  158. /*邮箱验证，这里，本真人就要吐槽下了，明明H5中input的tyep类型中有email,硬是不用，非要自己写，是嫌内存多吗！*/
  159. function emailFocus(){
  161.     var emailId=$("emailId");
  162.     emailId.className="import_prompt";
  163.     emailId.innerHTML="请输入您常用的电子邮箱";
  164.     }
  166. /*当鼠标离开保密邮箱文本框时，提示文本及样式*/    
  167. function emailBlur(){
  169.     var email=$("email");
  170.     var emailId=$("emailId");
  171.     var reg=/^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/;
  172.     if(email.value==""){
  173.         emailId.className="error_prompt";
  174.         emailId.innerHTML="保密邮箱不能为空，请输入保密邮箱";
  175.         return false;
  176.         }
  177.     if(reg.test(email.value)==false){
  178.         emailId.className="error_prompt";
  179.         emailId.innerHTML="保密邮箱格式不正确，请重新输入";
  180.         return false;
  181.         }
  182.         emailId.className="ok_prompt";
  183.         emailId.innerHTML="保密邮箱输入正确";
  184.         return true;
  185.     }
  187. /*表单提交时验证表单内容输入的有效性*/
  188. /*TNND,我说怎能要给上面的每个函数都加个false/true的返回值呢，原来在这等着呢，本真人刚刚看了
  189.  HTML中form标签属性，发现是这“<form action="" method="post" name="myform" onsubmit="return checkForm()">”
  190.  * 其中的onsubmit方法是让表单提交后，看看每个验证是否都通过了，如果通过了，自然返回true,否则，只有一个是false则都不通过！而这个“return checkForm()”的
  191.  * 返回值为false，那么表单就不会提交成功，好家伙！还好本真人在大学里就见过这种验证方式！不然，还真不一定能想明白！
  192.  * */
  193. function checkForm(){
  195.       var flagUserName=userNameBlur();
  196.       var flagPwd=pwdBlur();
  197.       var flagRepwd=repwdBlur();
  198.       var flagNickName=nickNameBlur();
  199.       var flagTel=telBlur();
  200.       var flagEmail=emailBlur();
  202.       userNameBlur();
  203.       pwdBlur();
  204.       repwdBlur();
  205.       nickNameBlur();
  206.       telBlur();
  207.       emailBlur();
  209.       if(flagUserName==true &&flagPwd==true &&flagRepwd==true &&flagNickName==true&&flagTel==true&flagEmail==true){
  210.           return true;
  211.           }
  212.         else{
  213.             return false;
  214.            }   
  215.     }

发表评论

表情：
评论列表 （有 0 条评论，110人围观）

还没有评论，来说两句吧...

相关阅读