欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JS校验与最终登陆界面功能完整示例

程序员文章站 2022-04-14 15:12:16
本文实例讲述了js校验与最终登陆界面功能。分享给大家供大家参考,具体如下:

本文实例讲述了js校验与最终登陆界面功能。分享给大家供大家参考,具体如下:

<html>
    <head>
        <title>注册页面</title>
        <meta charset="utf-8"/>
        <script type="text/javascript">
//            校验用户名
            function checkuname(){
//                获取用户名对象
                var uname=document.getelementbyid("uname").value;
//                创建校验正则表达式判断条件
                var reg=/^[\u4e00-\u9fa5]{2,4}$/;     //其中前面的一部分是汉字的正则表达式,后面的是汉字的合法范围,(第一次因为,正则表达式写错了)
//                获取后面的提示字
                var namespan=document.getelementbyid("namespan"); //span是一个没有特殊含义的自定义标签用来辅助设计
//                进行校验
                if(uname=="" || uname ==null){
                    namespan.innerhtml="用户名不能为空";
                    namespan.style.color="red";
                    return false;
                }else if(reg.test(uname)){
                    namespan.innerhtml="用户名合法";
                    namespan.style.color="green";
                    return true;
                }else{
                    namespan.innerhtml="用户名不合法";
                    namespan.style.color="red";
                    return false;
                }
            }
            function checkpassword(){
//                获取用户名对象
                var password1=document.getelementbyid("pws1").value; //我们是通过对象的value值(文本输入框的内容)进行判断的
//                创建校验正则表达式判断条件
                var reg=/^[a-z]\w{4,8}$/;     //首位为字母,后面为数字4到8位 ()
//                获取后面的提示字
                var pwsspan=document.getelementbyid("passwordspan"); //span是一个没有特殊含义的自定义标签用来辅助设计
//                进行校验
                if(password1=="" || password1 ==null){
                    pwsspan.innerhtml="*密码不能为空";
                    pwsspan.style.color="red";
                    return false;
                }else if(reg.test(password1)){
                    pwsspan.innerhtml="*密码合法";
                    pwsspan.style.color="green";
                    return true;
                }else{
                    pwsspan.innerhtml="*密码不合法";
                    pwsspan.style.color="red";
                    return false;
                }
//                return password1.value;
                checkpassworded();   //在失去焦点的时候(调用该函数时,也进行确认密码的校验),如果没有这个操作,当重新修改用户密码时,其不会在进行确认密码(即修改密码后即使不相同也不会报错)
            }
            //            校验确定密码
            function checkpassworded(){
//            获取确认密码对象
                var password2=document.getelementbyid("pws2").value;
//            获取第一次密码对象,以进行比较
                var password1=document.getelementbyid("pws1").value;
//                获取提示语的对象
                var pwslspan=document.getelementbyid("passwordlspan");
//                reg=checkpassword();
//       if(reg="" || reg=null)         //没能实现
                if(password2=="" || password2==null){   //null就是字符串类型,表示空字符串
                    pwslspan.innerhtml="*确认密码不能为空";
                    pwslspan.style.color="red";
                    return false;
                }else if(password1 == password2){      
                    pwslspan.innerhtml="*两次密码相同";
                    pwslspan.style.color="green";
                    return true;
                }else{
                    pwslspan.innerhtml="*两次密码不相同";
                    pwslspan.style.color="red";
                    return false;
                }
            }
//--------------------------------------------------------------------------------------------------------
//    考虑到有很多的校验方法都用到相同的方法和结构,所以我们在此对其进行封装
            function checkall(id,reg){      //封装的基本思想:相同的直接写入,不同的利用参数转换
                //接收传递的对象
                var inp=document.getelementbyid(id);   //我们传的参数是带双引号的
                var ie=inp.value;           //我们通过对象的值进行判断
                var alt=inp.alt;             //通过对象来获得其对应的一些值
                //接收传递的提示框对象
                var span=document.getelementbyid(id+"span");
                if(ie=="" || ie==null){
                    span.innerhtml=alt+"不能为空";
                    span.style.color="red";
                    return false;
                }else if(reg.test(ie)){
                    span.innerhtml=alt+"合法";
                    span.style.color="green";
                    return true;
                }else{
                    span.innerhtml=alt+"不合法";
                    span.style.color="red";
                    return false;
                }
            }
//            手机号的校验
            function checkphone(){
                return checkall("phone",/^1[3,4,5,7,8]\d{9}$/);
            }
//            邮箱的校验
            function checkmail(){
                return checkall("mail",/^([a-za-z0-9_-])+@([a-za-z0-9_-])+(.[a-za-z0-9_-])+$/);
            }
//            添加验证码
            function checkcode(){
//                获取验证码填写对象
                var code=document.getelementbyid("code1");
//                获取验证显示对象
                var codespan=document.getelementbyid("codespan");
                var tag=math.floor(math.random()*9000+1000);   //产生四位的整数,math.floor表示向下取整,
                codespan.innerhtml=tag;
            }
//            校验验证码
            function checkcoded(){
//                获取输入的验证码对象
                var code2=document.getelementbyid("code1").value;
//                 获取显示的验证码对象,以进行比较
                var codespan1=document.getelementbyid("codespan");
                var code1=codespan1.innerhtml;       //通过对象利用其innerhtml属性进行获得,其利用value不正确,没进一步探索
//                获取提示语的对象
                var codespan2=document.getelementbyid("codespan2");
//                alert(code1);       //得到的值是undefined
//                alert(code2);
                if(code2=="" || code2==null){   
                    codespan2.innerhtml="*验证码不能为空";
                    codespan2.style.color="red";
                    return false;
                }else if(code1 == code2){      
                    codespan2.innerhtml="*验证码相同";
                    codespan2.style.color="green";
                    return true;
                }else{
                    codespan2.innerhtml="*验证码不相同";
                    codespan2.style.color="red";
                    return false;
                }
            }
//            校验选择框
            function checkselect(){
//                获取选择框对象
                var select=document.getelementbyid("select").value;
//                获取选择框提示对象
                var selectspan=document.getelementbyid("selectspan");
//                selectspan.style.fontsize="15px";
                if(select==0){
                    selectspan.innerhtml="地址选择不能为空";
                    selectspan.style.color="red";
                    return false;
                }else{
                    selectspan.innerhtml=select;
                    selectspan.style.color="green";
                    return true;
                }
            }
//            检测多选框
            function checkfav(){
//                获取多选框对象
                var fav=document.getelementsbyname("fav");
//                获取多选框提示对象
                var favspan=document.getelementbyid("favspan");
                favspan.style.fontsize="10px";
                for(var i=0;i<fav.length;i++){
                    if(fav[i].checked){ //fav[i]是一个对象,fav[i].checked是一个值
                        favspan.innerhtml="选择成功";
                        favspan.style.color="green";
                        return true;       //选择成功后直接返回
                    }
                }                 //在整个循环结束后都没有进行选择,才进行不符合提示
                favspan.innerhtml="至少选择一个";
                favspan.style.color="red";
                return false;
            }
            function checkagree(){
//                当同意公司协议的时候才能进行提交操作
                document.getelementbyid("pop").disabled=!document.getelementbyid("agree").checked;
//                当同意公司协议的时候,对应的submit的对应值是true,所以我们利用!把disabled的值赋值为false
            }
            function checksub(){
//                校验是否可以提交
//                对于所有的校验函数,只要有一个不满足条件,就不能提交
                checkuname();
                checkpassword();
                checkpassworded();
                checkphone();
                checkmail();
                checkcoded();
                checkselect();
                checkfav();        //当所有值都为true的时候才能进行提交,所以对应的函数有返回值,不满足时返回false,满足时返回true
                return checkuname()&&checkpassword()&&checkpassworded()&&checkphone()&&checkmail()&&checkcoded()&&checkselect()&&checkfav();
            }
        </script>
        <style type="text/css">
            tr,td,table{
                background-color: transparent;
                border 0px;
            }
            span{
                font-size: 10px;
            }
            #codespan{
              width: 30px;
              height: 25px;
                font-size: 20px;
                color: black;
                background-size: 100%,100%;      /*后面三行是使背景图片占满整个区域*/
                background-repeat: no-repeat;
                background-image: url(../img/0.jpg);
            }
            #selectspan{
                font-size: 15px;
            }
            #showdiv{
                width: 30%;
                height: 100%;
                background-image: url(../img/5.jpg);
                background-size: cover;
                background-repeat: no-repeat;
                margin-left: 33%;
            }
            input,select,[type=checkbox],#bigtext{
                background-color: transparent;   /* 把一些边框背景变为透明的以显示背景*/
            }
        </style>
    </head>
    <body onload="checkcode(),checkselect(),checkfav()">
        <form action="#" action="get">
            <div align="center" id="showdiv">
            <table border="1px" cellpadding="5px" cellspacing="0px">
                <tr height="29px">
                    <td width="80px">姓名</td>
                    <td width="180px">
                        <input type="text" name="uname" value="" id="uname" onblur="checkuname()"/>
                        <span id="namespan"></span>  <!-- 以焦点的有无来进行判断-->
                    </td>
                </tr>
                <tr height="29px">
                    <td width="80px">邮箱</td>
                    <td width="180px">
                        <input type="text" name="mail" value="" id="mail" alt="邮箱" onblur="checkmail()"/>
                        <span id="mailspan"></span>
                    </td>
                </tr>
                <tr height="29px">
                    <td width="80px">手机号</td>
                    <td width="180px">      <!--查了很长时间的错误,就因为调用的函数没有用""包含,""在外面了-->
                        <input type="text" name="phone" value="" id="phone" alt="手机号" onblur="checkphone()"/>
                        <span id="phonespan"></span>  
                    </td>
                </tr>
                <tr height="31px">
                    <td width="80px">密码</td>
                    <td width="180px">
                        <input type="password" name="psw" value="" id="pws1" onblur="checkpassword()"/>
                        <span id="passwordspan"></span>
                    </td>
                </tr>
                <tr height="29px">
                    <td width="80px">确认密码</td>
                    <td width="180px">
                        <input type="password" name="psw2" value="" id="pws2" onblur="checkpassworded()"/>
                        <span id="passwordlspan"></span>
                    </td>
                </tr>
                <tr height="31px">
                    <td>性别</td>
                    <td>
                        男<input type="radio" name="sex" value="1" checked="checked" /> 女<input type="radio" name="sex" value="0" />
                    </td>
                </tr>
                <tr height="31px">
                    <td>所在地</td>
                    <td>
                        <select name="" id="select" onchange="checkselect()">
                            <option value="0"></option>
                            <option value="山东">山东</option>
                            <option value="北京">北京</option>
                            <option value="河南">河南</option>
                        </select>
                        <span id="selectspan"></span>
                    </td>
                </tr>
                <tr height="31px">
                    <td>爱好</td>
                    <td>               <!--我们对每一个都进行事件触发检验,因为每个选项都是平等的-->
                        动漫<input type="checkbox" name="fav" id="fav" onclick="checkfav()" value="animation"/>
                        游戏<input type="checkbox" name="fav" id="fav" onclick="checkfav()" value="game" />
                        打球<input type="checkbox" name="fav" id="fav" onclick="checkfav()" value="ball" />
                        <span id="favspan"></span>
                    </td>
                </tr>
                <tr height="31px">
                    <td>个人简介</td>
                    <td>
                        <textarea name="introduction" rows="7px" cols="25px" id="bigtext"></textarea>
                    </td>
                </tr>
                <tr height="31px">
                    <td width="80px">验证码</td>
                    <td width="180px">
                        <input type="password" name="code" value="" id="code1" onblur="checkcoded()"/>   
                        <span id="codespan" onclick="checkcode()"></span><br />
                        <span id="codespan2" onclick="checkcoded()"></span>
                        <!--<a href=""><span id=" rel="external nofollow" codespan" onclick="checkcode()"></span></a>-->  <!-- 行内显示一定的距离,可以直接用 -->
                    </td>   <!--可以用a标签把鼠标的图标变成一个小手,但是会触发超链接事件,感觉不提倡-->
                </tr>
                <tr height="31px">
                    <td colspan="2" align="center">
                        <input type="checkbox" name="select" id="agree" value="1" onclick="checkagree()" />是否同意我们的协议
                        <!--<input type="radio" name="select" id="agree" value="1" />是否同意我们的协议-->
                        <!--radio是互斥选择,当只有一个的时候,选中了,就取消不了了,要进行一些处理-->
                    </td>
                </tr>
                <tr height="31px">
                    <td colspan="2" align="center">
                        <input type="submit" value="注册" id="pop" disabled="true" onclick="checksub()"/>
                        <!--我们可不是所有的情况都可以进行submit-->
                    </td>
                </tr>
            </table>
            </div>
        </form>
    </body>
</html>

运行效果:

JS校验与最终登陆界面功能完整示例

感兴趣的朋友可以使用在线html/css/javascript代码运行工具http://tools.jb51.net/code/htmljsrun测试上述代码运行效果。

ps:这里再为大家提供2款非常方便的正则表达式工具供大家参考使用:

javascript正则表达式在线测试工具:

正则表达式在线生成工具: