注册界面的实时验证

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

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

<div id="header"><img src="img/register_logo.png" alt="logo"/></div>
    <div id="main">
    <table width="100%" border="0" cellpadding="0"  cellspacing="0">
    
    <tr>
        <td class="bg bg_top_left"></td>
        <td class="bg_top"></td>
        <td class="bg bg_top_right"></td>
    </tr>
    
    <tr>
        <td class="bg_left"></td>
        <td class="content">
        
        <form action="" method="post" name="myform" onsubmit="return checkForm()">
            
            <dl>
                <dt>通行证用户名：</dt>
                <dd><input type="text" id="userName" class="inputs userWidth" onfocus="userNameFocus()" onblur="userNameBlur()"/>@163.com</dd>
                <div id="userNameId"></div>
            </dl>
    
            <dl>
                <dt>登录密码：</dt>
                <dd><input type="password" id="pwd" class="inputs" onfocus="pwdFocus()" onblur="pwdBlur()"/></dd>
                <div id="pwdId"></div>
            </dl>
    
            <dl>
                <dt>重复登录密码：</dt>
                <dd><input type="password" id="repwd" class="inputs" onblur="repwdBlur()"/></dd>
                <div id="repwdId"></div>
            </dl>
    
            <dl>
                <dt>性别：</dt>
                <dd><input type="radio" name="sex" value="男" checked="checked"/>男
                    <input type="radio" name="sex" value="女" />女
                </dd>                           
            </dl>
    
            <dl>
                <dt>真实姓名：</dt>
                <dd><input type="text" id="realName" class="inputs" onblur="aa()"/></dd>
                <div id="userNameId"></div>
            </dl>
    
            <dl>
                <dt>昵称：</dt>
                <dd><input type="text" id="nickName" class="inputs" onfocus="nickNameFocus()" onblur="nickNameBlur()"/></dd>
                <div id="nickNameId"></div>
            </dl>
    
            <dl>
                <dt>关联手机号：</dt>
                <dd><input type="text" id="tel" class="inputs" onfocus="telFocus()" onblur="telBlur()"/></dd>
                <div id="telId"></div>
            </dl>
    
            <dl>
                <dt>保密邮箱：</dt>
                <dd><input type="text" id="email" class="inputs" onfocus="emailFocus()" onblur="emailBlur()"/></dd>
                <div id="emailId"></div>
            </dl>
    
            <dl>
                <dt></dt>
                <dd><input name=" " type="image" src="img/button.png"/></dd>
            </dl>
    
        </form>
        </td>
    
        <td class="bg_right"></td>
    </tr>
    
    <tr>
        <td class="bg bg_end_left"></td>
        <td class="bg bg_end"></td>
        <td class="bg bg_end_right"></td>
    </tr>
    </table>
    </div>

css样式：（style1.css）

@charset "utf-8";
    /*基础部分*/
    body,dl,dt,dd,div,form{
        padding: 0;margin: 0;}
    #header,#main{
        width:650px;
        margin:0 auto;
        background-color: #CCE8CF;
        }
    /*看不见的第一行*/
    /*这种风骚结构是本真人第一次见到，不得不说，让本真人眼前一亮*/
    .bg{
        /*background-image: url(../img/register_logo.gif);*/
        background-repeat: no-repeat;
        width: 6px;
        height: 6px;
        }
        /*表格：第一行*/
        .bg_top_left{
            background-position: 0px 0px;
        }
        .bg_top_right{
            background-position: 0px -6px;
        }
        .bg_top{
            border-top: solid 1px #666666;
        }
        /*表格：第三行*/
        .bg_end{
            border-bottom: solid 1px #666666;
        }
        .bg_end_left{
            background-position: 0px -12px;
        }
        .bg_end_right{
            background-position: 0px -18px;
        }
        /*表格：第二行*/
        .bg_left{
            border-left: solid 1px #666666;
        }
        .bg_right{
            border-right: solid 1px #666666;
        }
    /*第二行，第二列表单内容*/
    .content{
        padding: 10px;
        }
        .inputs{
            border: solid 1px #a4c8e0;
            width: 150px;
            height: 15px;
        }
        /*用户名独有*/
        .userWidth{
            width: 110px;
        }
        .content div{
            float: left;
            font-size: 12px;
            color: #000;
        }
        dl{
        /*待解释:这里让每个dl清浮动，像是为了让每个dl都相互独立！而不被第一个左浮动所影响变成一锅乱粥！*/
            clear: both;
        }
        dt,dd{
        /*浮动飘起来*/
            float: left;
        }
        /*将dt设置成文字右对齐，用来代替表格，造成同样的效果，很好！*/
        dt{
            width: 130px;
            text-align: right;
            font-size: 14px;
            height: 30px;
            line-height: 25px;
        }
        dd{
            font-size: 12px;
            color: #666666;
            width: 180px;
            margin-left: 35px;
        }
        /*待解释*/
    /*当鼠标放到文本框时，提示文本的样式*/
    .import_prompt{
        border:solid 1px #ffcd00;
        background-color:#ffffda;
        padding-left:5px;
        padding-right:5px;
        line-height:20px;
        }
    /*当文本框内容不符合要求时，提示文本的样式*/
    .error_prompt{
        border:solid 1px #ff3300;
        background-color:#fff2e5;
        background-image:url(../img/li_err.png);
        background-repeat:no-repeat;
        background-position:5px 2px;
        padding:2px 5px 0px 25px;
        line-height:20px;
        }
    /*当文本框内容输入正确时，提示文本的样式*/
    .ok_prompt{
        border:solid 1px #01be00;
        background-color:#e6fee4;
        background-image:url(../img/li_ok.png);
        background-repeat:no-repeat;
        background-position:5px 2px;
        padding:2px 5px 0px 25px;
        line-height:20px;
        }

JS代码：

/*通过ID获取HTML对象的通用方法，使用$代替函数名称*/
    function $(elementId){
        
        //这玩意是用来模拟JQuery语法，吓得本真人差点看不懂。
        return document.getElementById(elementId);
    }
    
    /*当鼠标放在通行证用户名文本框时，提示文本及样式*/
    function userNameFocus(){
        
        var userNameId=$("userNameId");
        /*提前在css中写好.import_prompt这个样式，通过className属性居然可以给div赋值class值！本真人法力大涨啊！*/
        /*之所以不在一开始就给div设置此css样式，就是为了要在获取焦点时，提示它！所以说，通过这种方法，完美！*/
        userNameId.className="import_prompt";
        userNameId.innerHTML="1、由字母、数字、下划线、点、减号组成<br />2、只能以数字、字母开头或结尾，且长度为4-18";
    }
    
    /*当鼠标离开通行证用户名文本框时，提示文本及样式*/
    function userNameBlur(){
        
        var userName=$("userName");
        var userNameId=$("userNameId");
        //这个正则表达式完美的解释了上面的文字提示！
        var reg=/^[0-9a-zA-Z][0-9a-zA-Z_.-]{2,16}[0-9a-zA-Z]$/;
        //这个是用户名为空的情况
        if(userName.value==""){
            userNameId.className="error_prompt";
            userNameId.innerHTML="通行证用户名不能为空，请输入通行证用户名";
            return false;/*有待解释*/
        }
        //这个是输入不合法的情况
        if(reg.test(userName.value)==false){
            userNameId.className="import_prompt";
            userNameId.innerHTML="1、由字母、数字、下划线、点、减号组成<br />2、只能以数字、字母开头或结尾，且长度为4-18";
            return false;
        }
        /*className:用的时候加载，不用的时候隐藏，这真是6的一逼啊！*/
        userNameId.className="ok_prompt";
        userNameId.innerHTML="通行证用户名输入正确";
        return true;    
    }
    /*当鼠标放在密码文本框是，提示文本及样式*/
    function pwdFocus(){
        
        var pwdId=$("pwdId");
        pwdId.className="import_prompt";/*卧槽，一次书写，多次调用，本真人跪了！*/
        pwdId.innerHTML="密码长度为6-16";
    }
    /*当鼠标离开密码文本框时，提示文本及样式*/
    function pwdBlur(){
        
        var pwd=$("pwd");
        var pwdId=$("pwdId");
        if(pwd.value==""){
            pwdId.className="error_prompt";
            pwdId.innerHTML="密码不能为空，请输入密码";
            return false;
        }
        if(pwd.value.length<6||pwd.value.length>16){
            pwdId.className="error_prompt";
            pwdId.innerHTML="密码长度为6-16";
            return false;
        }
        pwdId.className="ok_prompt";
        pwdId.innerHTML="密码输入正确";
        return true;
    }
    
    /*当鼠标离开重复密码文本框时，提示文本及样式*/
    function repwdBlur(){
        
        var pwd=$("pwd");
        var repwd=$("repwd");
        var repwdId=$("repwdId");
        if(repwd.value==""){
            pwdId.className="error_prompt";
            pwdId.innerHTML="重复密码不能为空，请重复输入密码";
            return false;
        }
        if(pwd.value!=repwd.value){
            repwdId.className="error_prompt";
            repwdId.innerHTML="两次输入的密码不一致，请重新输入";
            return false;
        }
        repwdId.className="ok_prompt";
        repwdId.innerHTML="两次密码输入正确";
        return true;
    }
    /*当鼠标放在昵称文本框时，提示文本及样式*/    
    function nickNameFocus(){
         /*这个验证在Html部分，写过了*/
        var nickNameId=$("nickNameId");
        nickNameId.className="import_prompt";
        nickNameId.innerHTML="1、包含汉字、字母、数字、下划线以及@!#$%&*特殊字符<br/>2、长度为4－20个字符<br/>3、一个汉字占两个字符";
        }
    /*当鼠标离开昵称文本框时，提示文本及样式*/    
    function nickNameBlur(){
        
        var nickName=$("nickName");
        var nickNameId=$("nickNameId");
        var k=0;
        var reg=/^([\u4e00-\u9fa5]|\w|[@!#$%&*])+$/;   // 匹配昵称(与错误提示真tm是一模一样！)
        var chinaReg=/[\u4e00-\u9fa5]/g;   //匹配中文字符
        if(nickName.value==""){
            nickNameId.className="error_prompt";
            nickNameId.innerHTML="昵称不能为空，请输入昵称";
            return false;
            }
        if(reg.test(nickName.value)==false){
            nickNameId.className="error_prompt";
            nickNameId.innerHTML="只能由汉字、字母、数字、下划线以及@!#$%&*特殊字符组成";
            return false;
            }
    
        var len=nickName.value.replace(chinaReg,"ab").length;  //把中文字符转换为两个字母，以计算字符长度
        if(len<4||len>20){
            nickNameId.className="error_prompt";
            nickNameId.innerHTML="1、长度为4－20个字符<br/>2、一个汉字占两个字符";
            return false;
            }
    
            nickNameId.className="ok_prompt";
            nickNameId.innerHTML="昵称输入正确";
            return true;
        } 
    
    /*当鼠标放在关联手机号文本框时，提示文本及样式*/
    /*提示都是千篇一律，错误提示是各有不同啊！*/
    function telFocus(){
        
        var telId=$("telId");
        telId.className="import_prompt";
        telId.innerHTML="1、手机号码以13，15，18开头<br/>2、手机号码由11位数字组成";
        }
    /*当鼠标离开关联手机号文本框时，提示文本及样式*/    
    function telBlur(){
        
        var tel=$("tel");
        var telId=$("telId");
        //13,15,18开头就长这德行，加上后面的任意9位，凑成11位，啧啧，每次看正则表达式，本真人都是醉了！
        var reg=/^(13|15|18)\d{9}$/;
        if(tel.value==""){
            telId.className="error_prompt";
            telId.innerHTML="关联手机号码不能为空，请输入关联手机号码";
            return false;
            }
        if(reg.test(tel.value)==false){
            telId.className="error_prompt";
            telId.innerHTML="关联手机号码输入不正确，请重新输入";
            return false;
            }
            telId.className="ok_prompt";
            telId.innerHTML="关联手机号码输入正确";
            return true;
        }   
    
    /*当鼠标放在保密邮箱文本框时，提示文本及样式*/
    /*邮箱验证，这里，本真人就要吐槽下了，明明H5中input的tyep类型中有email,硬是不用，非要自己写，是嫌内存多吗！*/
    function emailFocus(){
        
        var emailId=$("emailId");
        emailId.className="import_prompt";
        emailId.innerHTML="请输入您常用的电子邮箱";
        }
    
    /*当鼠标离开保密邮箱文本框时，提示文本及样式*/    
    function emailBlur(){
        
        var email=$("email");
        var emailId=$("emailId");
        var reg=/^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/;
        if(email.value==""){
            emailId.className="error_prompt";
            emailId.innerHTML="保密邮箱不能为空，请输入保密邮箱";
            return false;
            }
        if(reg.test(email.value)==false){
            emailId.className="error_prompt";
            emailId.innerHTML="保密邮箱格式不正确，请重新输入";
            return false;
            }
            emailId.className="ok_prompt";
            emailId.innerHTML="保密邮箱输入正确";
            return true;
        }
    
    /*表单提交时验证表单内容输入的有效性*/
    /*TNND,我说怎能要给上面的每个函数都加个false/true的返回值呢，原来在这等着呢，本真人刚刚看了
     HTML中form标签属性，发现是这“<form action="" method="post" name="myform" onsubmit="return checkForm()">”
     * 其中的onsubmit方法是让表单提交后，看看每个验证是否都通过了，如果通过了，自然返回true,否则，只有一个是false则都不通过！而这个“return checkForm()”的
     * 返回值为false，那么表单就不会提交成功，好家伙！还好本真人在大学里就见过这种验证方式！不然，还真不一定能想明白！
     * */
    function checkForm(){
        
          var flagUserName=userNameBlur();
          var flagPwd=pwdBlur();
          var flagRepwd=repwdBlur();
          var flagNickName=nickNameBlur();
          var flagTel=telBlur();
          var flagEmail=emailBlur();
    
          userNameBlur();
          pwdBlur();
          repwdBlur();
          nickNameBlur();
          telBlur();
          emailBlur();
    
          if(flagUserName==true &&flagPwd==true &&flagRepwd==true &&flagNickName==true&&flagTel==true&flagEmail==true){
              return true;
              }
            else{
                return false;
               }   
        }

[https_blog.csdn.net_jianzhonghao_article_details_60781741]: https://blog.csdn.net/jianzhonghao/article/details/60781741
[70]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/917a8625b2db4d5c9c49850de0c53b67.png