javascript 03: 练习

2年前 (2022) 程序员胖胖胖虎阿

314 0 0

验证邮箱是否合法

<!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>

版权声明：程序员胖胖胖虎阿发表于 2022年11月9日下午11:00。
转载请注明：javascript 03: 练习 | 胖虎的工具箱-编程导航