首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onJanuary 13, 2020

本文实例讲述了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.3water.com/code/HtmlJsRun测试上述代码运行效果。

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

- Author -

qq_42412646

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
字符串的replace方法应用浅析
Dec 06 Javascript
前端开发过程中浏览器版本的两种判定方法
Oct 30 Javascript
常见表单重复提交问题整理及解决方法
Nov 13 Javascript
影响jQuery使用的14个方面
Sep 01 Javascript
JavaScript事件类型中焦点、鼠标和滚轮事件详解
Jan 25 Javascript
JavaScript代码生成PDF文件的方法
Feb 26 Javascript
基于jQuery的Web上传插件Uploadify使用示例
May 19 Javascript
详解微信开发中snsapi_base和snsapi_userinfo及静默授权的实现
Mar 11 Javascript
AngularJS ng-repeat指令及Ajax的应用实例分析
Jul 06 Javascript
分享vue.js devtools遇到一系列问题
Oct 24 Javascript
用npm安装vue和vue-cli,并使用webpack创建项目的方法
Sep 28 Javascript
jQuery实现聊天对话框
Feb 08 jQuery
vue+vant实现商品列表批量倒计时功能
Jan 13 #Javascript
JS表格的动态操作完整示例
Jan 13 #Javascript
JavaScript实现模态对话框实例
Jan 13 #Javascript
JS动态图片的实现方法完整示例
Jan 13 #Javascript
js实现拖动缓动效果
Jan 13 #Javascript
Vue.js中的高级面试题及答案
Jan 13 #Javascript
深入理解redux之compose的具体应用
Jan 12 #Javascript
sentinel(1) ACID(1) mysqldump(1) sock(2) 黑屏(2) Outlook(1) Mysql8(2) minio(1) appdata(1) Windows server 2003(1)
You might like
php快速url重写 更新版[需php 5.30以上]
2010/04/20 PHP
PHP 5.3 下载时 VC9、VC6、Thread Safe、Non Thread Safe的区别分析
2011/03/28 PHP
利用php下载xls文件(自己动手写的)
2014/04/18 PHP
Yii实现显示静态页的方法
2016/04/25 PHP
laravel实现上传图片并在页面显示的例子
2019/10/14 PHP
Firefox window.close()的使用注意事项
2009/04/11 Javascript
event.keyCode键码值表 附只能输入特定的字符串代码
2009/05/15 Javascript
jQuery右键菜单contextMenu使用实例
2011/09/28 Javascript
jQuery.extend 函数详解
2012/02/03 Javascript
当鼠标移动到图片上时跟随鼠标显示放大的图片效果
2013/06/06 Javascript
IE8的JavaScript点击事件(onclick)不兼容的解决方法
2013/11/22 Javascript
js实现的点击数量加一可操作数据库
2014/05/09 Javascript
JavaScript实现函数返回多个值的方法
2015/06/09 Javascript
Javascript函数的参数
2015/07/16 Javascript
谷歌Chrome浏览器扩展程序开发小记
2016/01/06 Javascript
利用Plupload.js解决大文件上传问题, 带进度条和背景遮罩层
2017/03/15 Javascript
jQuery实现可拖动进度条实例代码
2017/06/21 jQuery
underscore之Chaining_动力节点Java学院整理
2017/07/10 Javascript
node.js中TCP Socket多进程间的消息推送示例详解
2018/07/10 Javascript
[12:29]《一刀刀一天》之DOTA全时刻19：蝙蝠骑士田伯光再度不举
2014/06/10 DOTA
python 请求服务器的实现代码(http请求和https请求)
2018/05/25 Python
对python中for、if、while的区别与比较方法
2018/06/25 Python
浅析Python 实现一个自动化翻译和替换的工具
2019/04/14 Python
Python/Django后端使用PIL Image生成头像缩略图
2019/04/30 Python
Python with用法：自动关闭文件进程
2019/07/10 Python
python实现的多任务版udp聊天器功能案例
2019/11/13 Python
pytorch实现mnist数据集的图像可视化及保存
2020/01/14 Python
ubuntu 安装pyqt5和卸载pyQt5的方法
2020/03/24 Python
pymongo insert_many 批量插入的实例
2020/12/05 Python
美国著名的户外用品品牌：L.L.Bean
2018/01/05 全球购物
PPP协议组成及简述协议协商的基本过程
2015/05/28 面试题
什么是继承
2013/12/07 面试题
Java Servlet的主要功能和作用是什么
2014/02/14 面试题
运动会加油稿30字
2015/07/21 职场文书
教师实习自我鉴定总结
2019/08/20 职场文书
CSS3通过var()和calc()函数实现动画特效
2021/03/30 HTML / CSS