ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

javascript练习

2022-07-20 20:03:40  阅读:175  来源: 互联网

标签:function sp javascript innerHTML 练习 getElementById var document


javascript简单练习

验证邮箱是否合法

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>js-DOM编程-正则表达式验证登陆邮箱</title>
        <meta charset="UTF-8">
        <style>
            *{
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }

            span{
                font-size: 12px;
            }
        </style>
    </head>
    <body>

        <!-- 
            需求:
            1. 点击提交按钮,首先验证是否填写邮箱,未填写则给出警告(红色)
            2. 如果已经填写,正则表达式验证文本框里的邮箱地址是否合法
            3. 不合法则给出非法提示(红色),合法则给出合法提示(绿色)
            4. 再次聚焦文本框时,提示字样消失
        -->
        <script>
            window.onload = function (){
                //获取按钮对象
                var btn = document.getElementById("btn");
                //获取提示span对象
                var sp = document.getElementById("sp");
                //获取输入文本框对象
                var email = document.getElementById("email");

                //为验证按钮绑定点击事件
                btn.onclick = function (){

                    var emailData = email.value;
                    if(!emailData){
                        sp.innerHTML = "<font color='red'>请先填写邮箱,再验证</font>";
                        return;
                    }
                    //创建正则表达式对象
                    var regEpr = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
                    //调用正则表达式对象的test方法进行字符串格式验证
                    var checkResult = regEpr.test(emailData);
                    if(!checkResult){
                        sp.innerHTML = "<font color='red'>非法格式</font>";
                    }else{
                        sp.innerHTML = "<font color='green'>通过验证</font>";
                    }
                }

                //为输入文本框绑定聚焦事件
                email.onfocus = function (){
                    sp.innerText = "";
                }
            }
        </script>
        <input type="text" id="email"><span id="sp"></span><br>
        <input type="button" id="btn" value="验证">
    </body>
</html>

简单的表单验证

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <title>实现简单表单验证:js + 正则表达式</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        span{
            font-size: 12px;
        }
    </style>
</head>
<body>
    <script>
        window.onload = function (){
            //获取各个节点对象
            var name = document.getElementById("uname");
            var passwd1 = document.getElementById("passwd1");
            var passwd2 = document.getElementById("passwd2");
            var btn = document.getElementById("sub-btn");
            var uname_sp = document.getElementById("uname-sp");
            var pwd_sp1 = document.getElementById("pwd-sp1");
            var pwd_sp2 = document.getElementById("pwd-sp2");
            var btn_sp = document.getElementById("btn-sp");
            var userform = document.getElementById("userform");

            //获取邮箱提示span对象
            var sp = document.getElementById("sp");
            //获取输入文本框对象
            var email = document.getElementById("email");

            //提交依据,各项都通过验证才可以正常提交
            var flag = [];

            /*
                表单验证的相关需求:
                    验证原则:
                        1. 写完一项,验证一项(失去焦点验证)
                        2. 红色警示和绿色通过提示(再次聚焦时,清空提示,若未通过验证,还要清除文本框中的数据)
                        4. 所有要求都满足后才可以提交成功
                    具体验证条件:
                        1. 用户名不能为空
            */

            //为用户名文本框绑定失去焦点事件
            name.onblur = function (){
                var nameData = name.value.trim();   //去除字符串前后空白
                //检查用户名是否为空
                if(!nameData || nameData.length < 6 || nameData.length > 14){
                    if(!nameData){
                        uname_sp.innerHTML = "<font color='red'>用户名不能为空</font>";     //分条提示对用户更友好
                    }else{
                        uname_sp.innerHTML = "<font color='red'>用户名的长度必须介于:6-14之间</font>";
                        //清空非法数据
                    }
                    name.value = "";
                    flag[0] = 0;    
                }else{
                    //检查用户名是否符合其他约束
                    var regEpr = /^[A-Za-z0-9]+$/;      //添加字符串的开始和结束限制
                    if(!regEpr.test(nameData)){
                        uname_sp.innerHTML = "<font color='red'>用户名只能包含数字和字母</font>";
                        //清空非法数据
                        name.value = "";
                        flag[0] = 0;    
                    }else{
                        uname_sp.innerHTML = "<font color='green'>用户名合法</font>";
                        flag[0] = 1;
                    }
                }
            }

            //为用户名文本框绑定聚焦事件
            name.onfocus = function (){
                //清空提示字样
                uname_sp.innerHTML = "";
            }


            //为密码框1绑定失去聚焦事件
        
            passwd1.onblur = function (){
                //只要焦点离开密码框1,密码框2必须清空
                passwd2.value = "";
                flag[1] = 0;
            }
            
            //为密码框2绑定失去聚焦事件
            passwd2.onblur = function (){
                //只要焦点离开密码框2,就要验证两次密码是否相同且非空
                var pwdData2 = passwd2.value;
                if(passwd1.value == pwdData2 && pwdData2){
                    pwd_sp2.innerHTML = "<font color='green'>密码合法</font>";
                    flag[1] = 1;
                }else{
                    pwd_sp2.innerHTML = "<font color='red'>密码不合法</font>"; 
                    flag[1] = 0;
                    passwd1.value = "";
                    passwd2.value = "";   
                }
            }

            //为密码框绑定事件
            passwd2.onfocus = function (){
                //清空提示字样
                pwd_sp2.innerHTML = "";
            }


            //为邮箱输入框绑定失去聚焦事件
            email.onblur = function (){
                var emailData = email.value;
                if(!emailData){
                    sp.innerHTML = "<font color='red'>请先填写邮箱,再验证</font>";
                    flag[2] = 0;
                    return;
                }
                //创建正则表达式对象
                var regEpr = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
                //调用正则表达式对象的test方法进行字符串格式验证
                var checkResult = regEpr.test(emailData);
                if(!checkResult){
                    sp.innerHTML = "<font color='red'>非法格式</font>";
                    flag[2] = 0;
                    email.value = "";
                }else{
                    sp.innerHTML = "<font color='green'>通过验证</font>";
                    flag[2] = 1;
                }
            }

            //为邮箱文本框绑定聚焦事件
            email.onfocus = function (){
                sp.innerText = "";
            }



            //提交时验证三个文本框是否全部合格
            btn.onclick = function (){
                var sum = 0;
                for(var index in flag){
                    sum += flag[index];
                }
                if(sum == 3){
                    btn_sp.innerHTML = "<font color='green'>提交成功</font>"    
                    //btn.type = "submit";    //实现表单的提交
                    userform.submit();          
                }else{
                    btn_sp.innerHTML = "<font color='red'>提交失败,请按要求填写表单</font>"                   
                }
            }

            //为提交按钮绑定失去焦点事件
            btn.onblur = function (){
                //清空提示字样
                btn_sp.innerHTML = "";
            }
        }
    </script>
    <form id= "userform" action="http:8080/test/test">
        用户名:<input type="text" name="username" id="uname"><span id="uname-sp"></span><br>
        邮箱:<input type="text" id="email"><span id="sp"></span><br>
        密码:<input type="password" name="password1" id="passwd1"><span id="pwd-sp1>"></span><br>
        确认密码:<input type="password" name="password2" id="passwd2"><span id="pwd-sp2"></span><br>
        <input type="button" name="btn" id="sub-btn" value="提交"><span id="btn-sp"></span>
    </form>
</body>
</html>

设置网页时种

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>显示网页时钟</title>
        <meta charset="UTF-8">
    </head>
    <body>
        <script>
           /*
           需求:
                1. 点击显示按钮,在指定的div里以本地语言习惯连续显示当前时间
                2. 点击暂停按钮,暂停显示时间
            */
            function showTime(){
                    var nowTime = new Date();
                    nowTime = nowTime.toLocaleString();
                    document.getElementById("showTime").innerHTML = nowTime;
            }

           window.onload = function (){
                //获取开始按钮和暂停按钮
                var startBtn = document.getElementById("start");
                var endBtn = document.getElementById("end");

                //为开始按钮绑定点击事件
                startBtn.onclick = function (){
                    //每间隔指定的毫秒数,调用目标函数
                    endSign = window.setInterval("showTime()", 1000);
                }

                //为暂停按钮绑定点击事件
                endBtn.onclick = function (){
                    window.clearInterval(endSign);
                }
           }
        </script>

        <input type="button" id="start" value="显示时间">
        <input type="button" id="end" value="暂停时间"><br>
        <div id="showTime"></div>
    </body>
</html>

设置顶级窗口

页面1

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>设置顶级窗口</title>
        <meta charset="UTF-8">
    </head>
    <body>
        <!-- 
            需求:如果当前窗口不是顶级窗口,则将其设置为顶级窗口
        -->
        <iframe src="002.html"></iframe>
    </body>
</html>

页面2

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>002page</title>
        <meta charset="UTF-8">
    </head>
    <body>
        <script>
            window.onload = function (){
                var btn = document.getElementById("setTop");
                btn.onclick = function (){
                    if(window.top != window.self){
                        //原先当前窗口的顶级窗口的地址为001.html, 现在覆盖成了自己页面的地址
                        window.top.location = window.self.location;
                    }
                }
            }
        </script>
        002 page<br>
        <input type="button" value="设置为顶级窗口" id="setTop">
    </body>
</html>

捕捉回车事件

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>js 捕捉键盘回车</title>
</head>
<body>
	<script type="text/javascript">
		//回车的keyCode 13
		//esc的keyCode 27
		window.onload = function () {
			document.getElementById("login").onkeydown = function(event){
				if(event.keyCode == 13){
					alert("提交成功,正在验证...");
				}
			}
		}
	</script>
	<input type="text" name="username" id="login">
</body>
</html>

正则表达式替换所有目标字符串

<<!DOCTYPE html>
<html lang="en">
    <head>
        <title>利用正则表达式替换所有指定字符</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
    
        <script>
            var targetStr = "name=value&name=value&name=value";
            //需求将目标字符串里的'&'替换成';'

            //传统实现
            //var resultStr =  targetStr.replace("&", ";").replace("&", ";");

            //正则表达式实现
            var resultStr = targetStr.replace(/&/g, ";");   //不要字符串括起来的正则表达式, 会被当作目标串

            //替换结果
            alert("原先原先结果:" + targetStr);     //原先字符串并没有被修改
            alert("替换结果:" + resultStr);
        </script>
    </body>
</html>

JSON简单练习

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>修改table的tbody内容</title>
        <meta charset="UTF-8">
    </head>
    <body>
        <script>
            var jsonData = {
                "emps" : [
                    {"empno" : 001, "empname" : "xun", "money" : "2.5W"},
                    {"empno" : 002, "empname" : "duan", "money" : "1.5W"},
                    {"empno" : 003, "empname" : "yuan", "money" : "0.8W"},
                    {"empno" : 004, "empname" : "jie", "money" : "0.7W"}
                ]
            }

            window.onload = function (){
                //获取显示按钮对象
                var btn = document.getElementById("btn");
                //为显示按钮绑定点击事件
                btn.onclick = function (){
                    var html = "";
                    //获取json数组
                    var emps = jsonData.emps;
                    for(var index in emps){
                        //拼接用户信息
                        html += "<tr>";
                        html += "<td>"+emps[index].empno+"</td>";
                        html += "<td>"+emps[index].empname+"</td>";
                        html += "<td>"+emps[index].money+"</td>";
                        html += "</tr>";
                    }
                    //获取tbody对象,填充数据
                    document.getElementById("tbody").innerHTML = html;
                    //获取span对象,填充数据
                    document.getElementById("count").innerText = emps.length;
                }
            }
        </script>
        <h2>员工信息表</h2>
        <hr>
        <input type="button" id="btn" value="显示员工信息">
        <table>
            <tr>
                <th>员工编号</th>
                <th>员工姓名</th>
                <th>员工薪资</th>
            </tr>
            <tbody id="tbody">
                <!--
                <tr>
                    <td>001</td>
                    <td>xun</td>
                    <td>25W</td>
                </tr>
                <tr>
                    <td>001</td>
                    <td>xun</td>
                    <td>25W</td>
                </tr>
                <tr>
                    <td>001</td>
                    <td>xun</td>
                    <td>25W</td>
                </tr>
                -->
            </tbody>
        </table>
        总记录:<span id="count">0</span>条
    </body>
</html>

标签:function,sp,javascript,innerHTML,练习,getElementById,var,document
来源: https://www.cnblogs.com/nefu-wangxun/p/16499594.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有