DOM的补充和表单验证（正则）

于 2022-01-06 22:05:23 发布
阅读量828 收藏
点赞数
分类专栏： HTML 文章标签： javascript css vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_45935397/article/details/122341319
版权

目录

对value的补充

1.onclick  鼠标单击 ondblclick 双击  对任何的元素都能设置 

2.onmouseover 指针移上； onmouseout 指针移走。onmousmove 指针在指定区域移动就会一直触发这个函数 

3.onkeyup( ) 获得焦点的函数；在焦点区域输入后点击指定按键触发

4.onblur 重要:当元素失去焦点时触发

onfocus:当元素获取焦点时

onchange重要 :当元素的值被改变时触发 ，针对表单元素 

onload:在页面加载完就自动触发；针对window对象；一般做页面初始化

默认事件阻止

例如a标签 ： 点击提交直接跳转；可以阻止跳转

阻止表单提交

 动态事件绑定可以获取到function(e)  静态事件获取不到e

静态阻止提交​

事件冒泡

 事件冒泡的好处：

坏处：有时不需要往上冒泡

正则表达式判断用户或者密码格式

Dom元素动态添加和删除

综合案例

联动设计：

BOM操作   browser object model浏览器  对象模型、

window对象

location对象

对value的补充

  • .checked 为true/false

  • 1.onclick  鼠标单击 ondblclick 双击  对任何的元素都能设置 

  • 2.onmouseover 指针移上； onmouseout 指针移走。onmousmove 指针在指定区域移动就会一直触发这个函数 

  • <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
		 div{width: 100px;height: 100px; border:1px solid gray; 
		 color: aliceblue;}
		</style>
	</head>
	<body>
		<input type="text" onclick="fun()" value="测试" />
		<!-- 鼠标移上或者移走的效果 静态事件-->
		<!-- <div ondblclick="fun()" onmouseover="over(this)" onmouseout="out(this)" onmousemove="move()"></div> -->
		<!-- 动态的绑定 -->
		<div ></div>
		<script>
			//静态 function over(node){
			// 	node.style.background="green"
			// }	
			// function out(node){
			// 	node.style.background=""
			// }
			// 	function move{
			// 		console.log("111")
			// 	}
		//动态绑定
		document.getElementsByTagName("div")[0].onmousemove=function(e){
			// 通过e访问当前位置	
			document.getElementsByTagName("input")[0].value="x="+e.clientX+"y="+e.clientY
		};
		</script>
	</body>
</html>

    动态获取指针位置效果：

  • 3.onkeyup( ) 获得焦点的函数；在焦点区域输入后点击指定按键触发

    • <input type="text" οnclick="fun()" value="测试" />
    • <script>
                   function fun(node){var node= document.getElementsByTagName("input")[0].οnkeyup=function(e)
                  {    if(e.keyCode==13){ //通过e的keyCode 判断键入的值 （回车的keyCode是13）
                      alert("提交哦")
                  }
                      
                      }
                  }
              </script>
    • 效果图： 

  • 4.onblur 重要:当元素失去焦点时触发

    • 可以用来判断用户名；密码是否合理
    • <!DOCTYPE html>
      <html>
          <head>
              <meta charset="utf-8" />
              <title></title>
              <style>
               div{width: 100px;height: 100px; border:1px solid gray; 
               color: aliceblue;}
              </style>
          </head>
          <body>
              <input type="text" οnclick="fun()" value="测试" />
              <!-- 鼠标移上或者移走的效果 静态事件-->
              <!-- <div οndblclick="fun()" οnmοuseοver="over(this)" οnmοuseοut="out(this)" οnmοusemοve="move()"></div> -->
              <!-- 动态的绑定 -->
              <div ></div>
              <script>
                   function fun(node){
                  //     node.style.background="green"
                  // }    
                  // function out(node){
                  //     node.style.background=""
                  // }
                  //     function move{
                  //         console.log("111")
                  //     }
              // //动态绑定
              // document.getElementsByTagName("div")[0].οnmοusemοve=function(e){
              //     // 通过e访问当前位置    
              //     document.getElementsByTagName("input")[0].value="x="+e.clientX+"y="+e.clientY
              // };
                  var node= document.getElementsByTagName("input")[0].οnkeyup=function(e)
                  {    if(e.keyCode==13){ //通过e的keyCode 判断键入的值 （回车的keyCode是13）
                      alert("提交哦")
                  }
                      }
                  }
              </script>
          </body>
      </html>

结果图 

onfocus:当元素获取焦点时

密码：<input id ="password" οnfοcus="tests(this)">

function tests(node){
                node.style.backgroundColor="green"
            }

  • onchange重要 :当元素的值被改变时触发 ，针对表单元素 

    • 指针移开触发一次
    • 例子<!DOCTYPE html>
      <html>
          <head>
              <meta charset="utf-8">
              <title>onchange</title>
          </head>
          <body>
              <select οnchange="showinfo(this)">
                  <option>选择城市</option>
                  <option value="sh">上海</option>
                  <option value="wh">武汉</option>
              </select>
              <input >
              <script>
                  function showinfo(node){
                      var info=""
                  if(node.value=='sh')
                  {info="上海"}
                  if(node.value=='wh')
                  {
                      info="武汉"
                  }
                  document.getElementsByTagName("input")[0].value=info
                  }
              </script>
          </body>
      </html>
  •  

  • onload:在页面加载完就自动触发；针对window对象；一般做页面初始化

    • 将<script>代码写到window.οnlοad=function(){   页面加载完成后自动触发 }

默认事件阻止

  • 例如a标签 ： 点击提交直接跳转；可以阻止跳转

    • 阻止表单提交

  • <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单提交</title>
	</head>
	<body>
		<form action="blur.html">
			用户名:<input id="username">
			<input type="submit" id="btn" value="注册">
		</form>
		<script> 
			var btn=document.getElementById("btn");
			btn.onclick=function(e){
				if(document.getElementById("username").value.length<6)
				{
					e.preventDefault();
				}
			}
		</script>
	</body>
</html>

  •  动态事件绑定可以获取到function(e)  静态事件获取不到e

  • 静态阻止提交

事件冒泡

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件冒泡</title>
	</head>
	<body>
		<div style="width:300px;height: 300px;border:1px solid gray; onclick="divClick()">
		<input type="button" value="按钮1" class="btn" >
		<input type="button" value="按钮2" class="btn">
		<input type="button" value="按钮3" class="btn"></div>
		
		<script>
			
			window.onload=function(){//保险起见写window
				document.getElementsByTagName("div")[0].onclick=function(e)//取出当前访问fun的元素
				{
					if(e.target.className=="btn")//只有class 标记是 btn的元素才能做出相应的操作
					{
						alert(e.target.value)
					}
				}
			}
		</script>
	</body>
</html>

 运行结果：

 事件冒泡的好处：

  • 简化子元素事件的注册过程；只需为父元素统一进行事件注册即可；

  • 坏处：有时不需要往上冒泡

    • 解决：在调用动态注册时；调用阻止往父类冒泡        
      • btnNodes[i].οnclick=function(e){
                                alert(e.target.value)
                                e.stopPropagation();
                            }

正则表达式判断用户或者密码格式

 史上最全常用正则表达式大全 - fozero - 博客园

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单</title>
	</head>
	<body>
		<form>
			<p>手机:<input id="mobile" placeholder="输入手机号"></p>
			<p>密码:<input id="password" type="password" placeholder="输入密码>6位"></p>
			<p><input type="submit" value="注册" onclick="return rege()"></p>
		</form>
		<script>
			function rege()
			{
				var mobile=document.getElementById("mobile").value
				var Password=document.getElementById("password").value
				
				//创建正则表达式
				var regExp=^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$
				if(!regExp.rege(mobile))//用正则表达式进行判断
				{
					alert("电话格式错误")
				}
				if(Password.length<6)
				{alert("密码不能小于6")}
			}
		</script>
	</body>
</html>

Dom元素动态添加和删除

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<ul>
			<li>第1个</li>
			<li>第2个</li>
			<li>第3个</li>
		</ul>
		<input type="button" value="测试" onclick="fun()">
		<script>
			function fun(){
			//点击按钮后 添加新元素 appendChild插到最后
				//创建一个li
				 var newLi = document.createElement("li")
				 newLi.innerText="动态添加的一个"
				 //将创建的新元素作为一个子元素添加到DOM的一个父元素中
				 //选择父元素将一个li添加到ul下面
				 var ulNode=document.getElementsByTagName("ul")[0]
				 //追加到末尾
				 ulNode.appendChild(newLi)
			//添加到指定位置
			 //  var liNode=  document.getElementsByTagName("li")[1]
				// ulNode.insertBefore(newLi,liNode)
			}
		</script>
	</body>
</html>

 点击测试

添加到指定的位置 

  •                 //添加到指定位置 选中第几个元素
                    //  var liNode=  document.getElementsByTagName("li")[1]
                    // ulNode.insertBefore(newLi,liNode)// 新元素/插入子元素前
  •                         
  •  都是基于父元素进行更改；
    • replaceChild() 用新元素替换老元素
    • removeChild(子元素) 也是基于父元素调用；删除某个子元素

综合案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="Keywords" content="">
		<title></title>
		<style> 
		table{border: 1px solid gray;border-collapse: collapse;}
		.popDiv{width:300px;height:300px;border:1px solid gray;display:none;
	position:absolute;background:pink;z-index:99;}
		td,th{border:1px solid gray;text-align:center}
		
		</style>
	</head>
	<body>
		<table>
			<thead>
			<tr>
				<th>编号</th>
				<th>姓名</th>
				<th>性别</th>
				<th>年龄</th>
				<th>操作</th>
			</tr>
			</thead>
			<tbody></tbody>
		</table>
		<div class="popDiv">
			<h2>学生信息修改</h2>
			<p>编号：<input></p>
			<p>姓名：<input></p>
			<p>性别：<input></p>
			<p>年龄：<input></p>
			<p><input type="button" value="保存">
			<input type="button" value="取消" onclick="closePopDiv()"></p>
		</div>
		
		<script> 
		var popDiv= document.getElementsByClassName("popDiv")[0]
		function closePopDiv(){
			popDiv.style.display="none"
			document.getElementsByTagName("body")[0].removeChild(document.getElementsByClassName("mask")[0])//移除插到body第0个位置的popDiv
			
		}
		//模拟后台发送的数据
			var students = [{id:1,name:"张三",gender:"男",age:20},
			{id:1,name:"李思",gender:"男",age:20},
			{id:1,name:"万物",gender:"女",age:20},
			{id:1,name:"赵柳",gender:"男",age:20}]
			//以上数据以表格提供数据在页面进行展示
		//获取tbody对象
			var tbodyNode= document.getElementsByTagName("tbody")[0]
			students.forEach(function(value,index)//js数组，可以用forEach  当前元素/下标
			{
			//创建tr对象
				var trNode=document.createElement("tr");
			//根据对象的属性创建td对象
				for(var p in value){//p：属性名 4个
					var tdNode=document.createElement("td")
					tdNode.innerHTML=value[p];//将第一条数据写入第一个 td
					trNode.appendChild(tdNode)//将每个个td添加到tr中
					
				}
				//先将表格排完序再添加删除和改
				//放增加和删除
				var optd=document.createElement("td")
				var btnupdate=document.createElement("button")
				btnupdate.innerHTML="修改"
				btnupdate.className="upd"//class名
				var btndelete=document.createElement("button")
				btndelete.innerHTML="删除"//class名
				
				btndelete.className="del"
				optd.appendChild(btnupdate)
				optd.appendChild(btndelete)
				//将btn挂到每个tr后面
				trNode.appendChild(optd)
			//将tr对象挂到tbody中
				tbodyNode.appendChild(trNode)
			})
			//获取popDiv对象
			
			
		//页面加载完成后给所有删除进行事件绑定
			window.onload=function(){
				//获取所有的删除按钮
				var delbtn = document.getElementsByClassName("del")
				
				for(var i=0;i<delbtn.length;i++)
				{
					delbtn[i].onclick=function(){
					
						//确认是否删除
						var r= window.confirm("确定删除吗？");
						if(r){
							tbodyNode.removeChild(this.parentNode.parentNode)//删除del父元素的父元素的子元素
						}
					}
				}
				//修改
				var updbtn=document.getElementsByClassName("upd")
				for(var i=0;i<updbtn.length;i++)
				{
					updbtn[i].onclick=function(){
						popDiv.style.display="block";//显示隐藏的popDiv
						//更改popDiv位置
						var w=document.documentElement.clientWidth;//宽
						var h =document.documentElement.clientHeight//高
						var left=(w-300)/2 + "px";
						var top = (h-300)/2+"px";
						
						popDiv.style.left=left;
						popDiv.style.top=top;
						
						//设置覆盖的蒙版
						var maskDiv =document.createElement("div")//创建一个新div
						maskDiv.className="mask";
						maskDiv.style.width=w+"px"
						maskDiv.style.height=h+"px"
						maskDiv.style.background="rgba(0,0,0,0.3)"
						
						maskDiv.style.position="absolute"//覆盖整个页面
						maskDiv.style.left="0"
						maskDiv.style.top="0"
						//创建一个和body一样大的div并加到body里
						document.getElementsByTagName("body")[0].appendChild(maskDiv)
					}
				}
			}
		</script>
	</body>
</html>

效果图：

联动设计：

<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <meta name="Keywords" content="">
  <title>省市联动</title>
 </head>
 <body>
    <select id="provinceSelect">
		<option>--选择省份--</option>
	</select>

	<select id="citySelect">
	
	</select>

	<script>
		//模拟省市的数据（也是从服务器加载）
		var data=[
		          {province:"湖北",citys:["武汉","宜昌","襄阳","仙桃"]},
				  {province:"江西",citys:["南昌","九江","景德镇","赣州"]},
				  {province:"河南",citys:["郑州","开封","洛阳","信阳"]}
				 ]

	   var provinceSelect=document.getElementById("provinceSelect");
	   var citySelect=document.getElementById("citySelect");

	   data.forEach(function(value){

		   //1.创建子元素 option对象
		   var option=window.document.createElement("option");
		   option.innerHTML=value["province"];
		   option.value=value["province"];
		   provinceSelect.appendChild(option)

		
	   })


	   provinceSelect.onchange=function(){
	        var province=this.value;
			var citys;
			data.forEach(function(value){
				if(value.province==province){
					citys=value.citys;
				}
			})


			citySelect.innerHTML="";
			citys.forEach(function(value){
				var option=document.createElement("option");
				option.innerHTML=value;
				citySelect.appendChild(option)
			})

			



	   }

	</script>
 </body>
</html>
  • 每选择一个省；会自动跳转市

BOM操作   browser object model浏览器  对象模型、

  • window对象

    • alert()弹窗
    • prompt()输入框
    • confirm()确认
    • parseInt/  parseFloat 转换为整形/转换为小数
    • setInterval()定时器、

    • 清除定时器 clearInterval(id) //id是开启定时器返回的一个id 

    •  setTimeout() 延时执行一次

    • location对象

      • 浏览器的地址栏； 让我们从js操作

      • href:操作地址栏的地址

      • reload:按照地址栏的地址刷新页面

      •  

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值