DOM编程事件&正则表达式&表单校验

一条要上岸的鱼

已于 2022-07-28 16:34:49 修改

阅读量437

点赞数

分类专栏：前端文章标签： javascript 前端

于 2022-07-26 09:01:58 首次发布

本文链接：https://blog.youkuaiyun.com/wk3510/article/details/125977575

版权

前端专栏收录该内容

4 篇文章

订阅专栏

4.9 框架/对象（Frame/Object）事件

BOM 浏览器对象模型操作window对象对浏览器窗口进行编程：历史对象地址栏对象文档对象导航对象其他

DOM 文档对象模型操作document对象对网页上面的标签进行增删改查

JavaScript三大组成部分： ECMAScript (语法) BOM编程 DOM编程

一、增加

传统模式

<input id="hehe" /><button id="haha">广播</button>
		<div id="xixi"></div>
		<script>
			haha.onclick=function(){
				var s =document.createElement("span");
				s.innerHTML=hehe.value;
				xixi.appendChild(s);
			}
		</script>

模板模式

<input id="hehe" /><button id="haha">广播</button>
		<div id="xixi"></div>
		<script type="text/template" id="lala">
			<div>
				<img src = "img/1.jpg"  width="150px" />八嘎说:
				<p>xxx</p>
				<span>yyy</span>
				<button>评论</button>
				<button>点赞</button>
				<button>删除</button>
			</div>
		</script>
		<script>
			haha.onclick=function(){
				xixi.innerHTML +=lala.innerHTML.replace("xxx",hehe.value).replace("yyy",new Date());
			}
		</script>

二、删除

<div id="a2" style="width: 150px;border: 2px solid red;">
			是兄弟就来啃我
			<button id="a1">关闭</button>
		</div>
		
		<input id="hehe" /><button id="haha">广播</button>
		<div id="xixi"></div>
		
		<script type="text/template" id="lala">
			<div class="k">
				<img  src="img/1.jpg" width="50px" />赵鸭子说:
				<p>xxx</p>
				<span>yyy</span>
				<button>评论</button>
				<button>点赞</button>
				<button onclick="del(this)">删除</button>
			</div>
		</script>
		<script>
			
			function del(a){
				a.parentNode.remove();
			}
			
			a1.onclick=function(){
				a2.remove();
			}
			
			haha.onclick=function(){
				xixi.innerHTML += lala.innerHTML.replace("xxx",hehe.value).replace("yyy",new Date());
			}
		</script>

三、查找

<div id="haha">
			<p id="hehe">A</p>
			<p id="hehe">
				<span id="xixi">
					<span>1</span>
					<span>2</span>
					<span>3</span>
				</span>
			</p>
			<p id="hehe">B</p>
		</div>
			
			<script>
				//获取所有id标签
				var a = document.getElementById("xixi");
				//获取第一个子标签
				var d1 = a.firstElementChild;
				//获取最后一个子标签
				var d2 = a.lastElementChild;
				//获取所有的子标签
				var d3 = a.children;
				//获取父级标签
				var d4 = a.parentElement;
				//获取父级标签
				var d5 = a.parentNode;
				//获取父级的父级标签
				var d6 = a.parentNode.parentNode;
				//获取往下同级的标签
				var d7 = d5.nextElementSibling;
				//获取网上同级的标签
				var d8 = d5.previousElementSibling;
				//使用选择器获取符合要求的所有标签 并以数组的形式进行返回
				var d9 = document.querySelectorAll("#hehe");
				//使用选择器获取符合要求的第一个标签
				var d10 = document.querySelector("span");
			</script>

购物车

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
	</head>
    <body>
		
		<div class="row">
			<div class="col-md-2">
				<div class="form-group">
				    <label for="exampleInputEmail1">商品名称</label>
				    <input type="email" class="form-control" id="i1" placeholder="Email">
				</div>
				<div class="form-group">
				    <label for="exampleInputEmail1">商品价格</label>
				    <input type="email" class="form-control" id="i2" placeholder="Email">
				  </div>
				  <button class="btn btn-success" id="add">添加</button>
				  <button class="btn btn-danger" id="del">删除</button>
				  <button class="btn btn-primary" id="fanxuan">反选</button>
			</div>
			<div class="col-md-10">
				<table class="table table-bordered table-hover table-striped ">
					<thead>
						<tr>
							<th><input type="checkbox" id="checkAll"></th>
							<th>商品名称</th>
							<th>商品价格</th>
							<th>商品操作</th>
						</tr>
					</thead>
					<tbody id="tb">
						
					</tbody>
				</table>
			</div>
		</div>
		<script type="text/template" id="temp">
			<tr>
				<td><input type="checkbox" class ="gs"/></td>
				<td>xxx</td>
				<td>yyy</td>
				<td><button class = "btn btn-danger" onclick="dele(this)">删除</button></td>	
			</tr>
		</script>
		
		<script>
			
			//单个删除
			function dele(a){
				a.parentNode.parentNode.remove();
			}
			
			//全选删除
			del.onclick=function(){
				var arr = document.querySelectorAll(".gs");
				for(i=0;i<arr.length;i++){
					if(arr[i].checked){
						arr[i].parentNode.parentNode.remove();
					}
				}
			}
			
			//反选
			fanxuan.onclick=function(){
				var arr = document.querySelectorAll(".gs");
				for(i=0;i<arr.length;i++){
					arr[i].checked=!arr[i].checked;
				}
			}
			
			//全选
			checkAll.onchange=function(){
				var arr = document.querySelectorAll(".gs");
				for(i=0;i<arr.length;i++){
					arr[i].checked=checkAll.checked;
				}
			}
			
			//增加
			add.onclick=function(){
				tb.innerHTML += temp.innerHTML.replace("xxx",i1.value).replace("yyy",i2.value);
			}
		</script>
	</body>
</html>

四、事件和事件对象

事件就是用户在浏览器中的操作例如：点击事件
事件对象用户触发事件时所有的信息封装成一个对象
例如：用户点击这是一个事件那么他用的是左键点击还是右键点击点击的时候是否按下了ctrl shift

4.1 事件对象

常量

静态变量	描述	DOM
CAPTURING-PHASE	当前事件阶段为捕获阶段(1)	1
AT-TARGET	当前事件是目标阶段,在评估目标事件(1)	2
BUBBLING-PHASE	当前的事件为冒泡阶段 (3)

属性

属性	描述	DOM
bubbles	返回布尔值，指示事件是否是起泡事件类型。	2
cancelable	返回布尔值，指示事件是否可拥可取消的默认动作。	2
currentTarget	返回其事件监听器触发该事件的元素。	2
eventPhase	返回事件传播的当前阶段。	2
target	返回触发此事件的元素（事件的目标节点）。	2
timeStamp	返回事件生成的日期和时间。	2
type	返回当前 Event 对象表示的事件的名称。	2

方法

方法	描述	DOM
initEvent()	初始化新创建的 Event 对象的属性。	2
preventDefault()	通知浏览器不要执行与事件关联的默认动作。	2
stopPropagation()	不再派发事件。	2

4.2 目标事件对象

方法

方法	描述	DOM
addEventListener()	允许在目标事件中注册监听事件(IE8 = attachEvent())	2
dispatchEvent()	允许发送事件到监听器上 (IE8 = fireEvent())	2
removeEventListener()	运行一次注册在事件目标上的监听事件(IE8 = detachEvent())	2

4.3 事件监听对象

方法

方法	描述	DOM
handleEvent()	把任意对象注册为事件处理程序	2

4.4 文档事件对象

方法	描述	DOM
createEvent()		2

4.5 鼠标键盘事件对象

属性

属性	描述	DOM
altKey	返回当事件被触发时，"ALT" 是否被按下。	2
button	返回当事件被触发时，哪个鼠标按钮被点击。	2
clientX	返回当事件被触发时，鼠标指针的水平坐标。	2
clientY	返回当事件被触发时，鼠标指针的垂直坐标。	2
ctrlKey	返回当事件被触发时，"CTRL" 键是否被按下。	2
Location	返回按键在设备上的位置	3
charCode	返回onkeypress事件触发键值的字母代码。	2
key	在按下按键时返回按键的标识符。	3
keyCode	返回onkeypress事件触发的键的值的字符代码，或者 onkeydown 或 onkeyup 事件的键的代码。	2
which	返回onkeypress事件触发的键的值的字符代码，或者 onkeydown 或 onkeyup 事件的键的代码。	2
metaKey	返回当事件被触发时，"meta" 键是否被按下。	2
relatedTarget	返回与事件的目标节点相关的节点。	2
screenX	返回当某个事件被触发时，鼠标指针的水平坐标。	2
screenY	返回当某个事件被触发时，鼠标指针的垂直坐标。	2
shiftKey	返回当事件被触发时，"SHIFT" 键是否被按下。	2

方法

方法	描述	W3C
initMouseEvent()	初始化鼠标事件对象的值	2
initKeyboardEvent()	初始化键盘事件对象的值	3

用altKey来判断事件触发时，ALT是否被按下 Ctrl Shift Meta 都是一样的

<button id="haha">改变就是好事</button>
		<script type="text/javascript">
			haha.onclick=function(e){
				if(e.altKey){
					document.body.style.backgroundColor = "yellow";
				}else{
					document.body.style.backgroundColor = "blue";
				}
			}
		</script>

onmousedown 鼠标被按下


<script>

    #xixi{
				position: absolute;
				transition: all 2s;
		}

</script>


<button id="xixi">改变就是好事</button>
		<script  type="text/javascript">
			document.body.onmousedown = function(e){
				 // 2 右键 1 中间  0 左键
				console.log(e.button);	
				console.log(e.clientX,e.clientY);
				xixi.style.left=e.clientX+"px";
				xixi.style.top=e.clientY+"px";
			}
		</script>

4.6 事件阻断

在事件中默认 return true; 代表事件正常执行如果要阻断事件则 return false;

属性	描述	DOM
onclick	当用户点击某个对象时调用的事件句柄。	2
oncontextmenu	在用户点击鼠标右键打开上下文菜单时触发
ondblclick	当用户双击某个对象时调用的事件句柄。	2
onmousedown	鼠标按钮被按下。	2
onmouseenter	当鼠标指针移动到元素上时触发。	2
onmouseleave	当鼠标指针移出元素时触发	2
onmousemove	鼠标被移动。	2
onmouseover	鼠标移到某元素之上。	2
onmouseout	鼠标从某元素移开。	2
onmouseup	鼠标按键被松开。	2

<style>
    
    #oo{
			position: absolute;
			transition: all 2s;
		}
			#hehe{
				border: 2px solid red;
				width: 200px;
				display: none;
				position: absolute;
				transition: all 1s;
			}    

</style>

<div id="hehe">
			<ol>
				<li>装备</li>
				<li>任务</li>
				<li>经验</li>
			</ol>
		</div>
		<button id="oo">改变世界</button>
		<script type="text/javascript">
			document.body.oncontextmenu=function(){
				return false;
			}
			document.body.onmousedown = function(e){
				if(e.button == 2){
					hehe.style.display ="block";
					hehe.style.left = e.clientX+"px";
					hehe.style.top = e.clientY+"px";
				}else if(e.button == 0){
					oo.style.left = e.clientX+"px";
					oo.style.top = e.clientY+"px";
				}
			}
		</script>

4.7 鼠标事件

onclick:当用户点击某个对象时调用的事件句柄。

ondblclick:当用户双击某个对象时调用的事件句柄。

onmousedown:鼠标按钮被按下。

onmouseup:鼠标按键被松开。

onmouseenter:当鼠标指针移动到元素上时触发。

onmouseleave:当鼠标指针移出元素时触发。

<button id="dd">点赞</button>
		<span id="ss">传奇</span>
		<script type="text/javascript">
			dd.onclick=function(){
				dd.innerHTML= "已赞";
			}
			dd.ondblclick=function(){
				dd.innerHTML="大佬666 一刀8个9";
			}
			
			ss.onmouseenter=function(){
				ss.style.backgroundColor="blue";
			}
			ss.onmouseleave = function(){
				ss.style.backgroundColor="red";
			}
			ss.onmousedown = function(){
				ss.innerHTML="拉环";
			}
			ss.onmouseup=function(){
				ss.innerHTML="爆炸";
			}
		</script>

4.8 键盘事件

属性	描述	DOM
onkeydown	某个键盘按键被按下。	2
onkeypress	某个键盘按键被按下并松开。	2
onkeyup	某个键盘按键被松开。	2

<button id="qq">Q技能</button>
		<button id="ww">W技能</button>
		<script type="text/javascript">
			document.body.onkeydown = function(e){
				console.log(e.keyCode);
				if(e.keyCode == 81){
					qq.innerHTML = "蓄力Q技能";
				}else if(e.keyCode == 87){
					ww.innerHTML = "释放W技能";
				}
				document.body.onkeyup = function(e){
					if(e.keyCode == 81){
						qq.innerHTML="释放Q技能";
					}
				}
			}
		</script>

<head>
		<meta charset="utf-8">
		<title></title>
		<style>
             body,html { height: 100%;}				 
			 #haha{
				 position: absolute;
				 transition: all 2s;
			 }
		</style>

	</head>
	<body>
            <button id="haha">泽拉斯Q</button>
	 		<script type="text/javascript">
	 			
				document.body.onkeydown = function(e){
					if(e.keyCode == 87){
						haha.style.top = "0px"
					}else if(e.keyCode == 65){
						haha.style.left = "0px"
					}else if(e.keyCode == 83){
						haha.style.top = "1000px"
					}else if(e.keyCode == 68){
						haha.style.left = "1000px"
					}
				}
	 		</script>
	</body>

4.9 框架/对象（Frame/Object）事件

属性	描述	DOM
onabort	图像的加载被中断。 ( <object>)	2
onbeforeunload	该事件在即将离开页面（刷新或关闭）时触发	2
onerror	在加载文档或图像时发生错误。 ( <object>, <body>和 <frameset>)
onhashchange	该事件在当前 URL 的锚部分发生修改时触发。
onload	一张页面或一幅图像完成加载。	2
onpageshow	该事件在用户访问页面时触发
onpagehide	该事件在用户离开当前网页跳转到另外一个页面时触发
onresize	窗口或框架被重新调整大小。	2
onscroll	当文档被滚动时发生的事件。	2
onunload	用户退出页面。 ( <body> 和 <frameset>)	2

<style>
    #haha{
				border-radius: 150px;
				border: 2px solid red;
			}
</style>

<img id="haha" src="" width="200px" height="200px"/>
		<input type="file" id="hehe" multiple/>
		<script type="text/javascript">
			hehe.onchange=function(){
				var r = new FileReader();
				r.readAsDataURL(hehe.files[0]);
				r.onload=function(){
					haha.src = r.result;
				}
			}
		</script>

4.10 表单事件

属性	描述	DOM
onblur	元素失去焦点时触发	2
onchange	该事件在表单元素的内容改变时触发( <input>, <keygen>, <select>, 和 <textarea>)	2
onfocus	元素获取焦点时触发	2
onfocusin	元素即将获取焦点时触发	2
onfocusout	元素即将失去焦点时触发	2
oninput	元素获取用户输入时触发	3
onreset	表单重置时触发	2
onsearch	用户向搜索域输入文本时触发 ( <input="search">)
onselect	用户选取文本时触发 ( <input> 和 <textarea>)	2
onsubmit	表单提交时触发	2

剪贴板事件

属性	描述	DOM
oncopy	该事件在用户拷贝元素内容时触发
oncut	该事件在用户剪切元素内容时触发
onpaste	该事件在用户粘贴元素内容时触发

打印事件

属性	描述	DOM
onafterprint	该事件在页面已经开始打印，或者打印窗口已经关闭时触发
onbeforeprint	该事件在页面即将开始打印时触发

拖动事件

事件	描述	DOM
ondrag	该事件在元素正在拖动时触发
ondragend	该事件在用户完成元素的拖动时触发
ondragenter	该事件在拖动的元素进入放置目标时触发
ondragleave	该事件在拖动元素离开放置目标时触发
ondragover	该事件在拖动元素在放置目标上时触发
ondragstart	该事件在用户开始拖动元素时触发
ondrop	该事件在拖动元素放置在目标区域时触发

多媒体（Media）事件

事件	描述	DOM
onabort	事件在视频/音频（audio/video）终止加载时触发。
oncanplay	事件在用户可以开始播放视频/音频（audio/video）时触发。
oncanplaythrough	事件在视频/音频（audio/video）可以正常播放且无需停顿和缓冲时触发。
ondurationchange	事件在视频/音频（audio/video）的时长发生变化时触发。
onemptied	当期播放列表为空时触发
onended	事件在视频/音频（audio/video）播放结束时触发。
onerror	事件在视频/音频（audio/video）数据加载期间发生错误时触发。
onloadeddata	事件在浏览器加载视频/音频（audio/video）当前帧时触发触发。
onloadedmetadata	事件在指定视频/音频（audio/video）的元数据加载后触发。
onloadstart	事件在浏览器开始寻找指定视频/音频（audio/video）触发。
onpause	事件在视频/音频（audio/video）暂停时触发。
onplay	事件在视频/音频（audio/video）开始播放时触发。
onplaying	事件在视频/音频（audio/video）暂停或者在缓冲后准备重新开始播放时触发。
onprogress	事件在浏览器下载指定的视频/音频（audio/video）时触发。
onratechange	事件在视频/音频（audio/video）的播放速度发送改变时触发。
onseeked	事件在用户重新定位视频/音频（audio/video）的播放位置后触发。
onseeking	事件在用户开始重新定位视频/音频（audio/video）时触发。
onstalled	事件在浏览器获取媒体数据，但媒体数据不可用时触发。
onsuspend	事件在浏览器读取媒体数据中止时触发。
ontimeupdate	事件在当前的播放位置发送改变时触发。
onvolumechange	事件在音量发生改变时触发。
onwaiting	事件在视频由于要播放下一帧而需要缓冲时触发。

动画事件

事件	描述	DOM
animationend	该事件在 CSS 动画结束播放时触发
animationiteration	该事件在 CSS 动画重复播放时触发
animationstart	该事件在 CSS 动画开始播放时触发

过渡事件

事件	描述	DOM
transitionend	该事件在 CSS 完成过渡后触发。

其他事件

事件	描述	DOM
onmessage	该事件通过或者从对象(WebSocket, Web Worker, Event Source 或者子 frame 或父窗口)接收到消息时触发
onmousewheel	已废弃。使用 onwheel 事件替代
ononline	该事件在浏览器开始在线工作时触发。
onoffline	该事件在浏览器开始离线工作时触发。
onpopstate	该事件在窗口的浏览历史（history 对象）发生改变时触发。
onshow	该事件当 <menu> 元素在上下文菜单显示时触发
onstorage	该事件在 Web Storage(HTML 5 Web 存储)更新时触发
ontoggle	该事件在用户打开或关闭 <details> 元素时触发
onwheel	该事件在鼠标滚轮在元素上下滚动时触发

事件冒泡

<ul>
			<li>川菜
				<ul>
					<li>麻婆豆腐</li>
					<li>麻辣烫</li>
					<li>宫保鸡丁</li>
				</ul>
			</li>
		</ul>
		<ul>
			<li>粤菜
				<ul>
					<li>广东烧鹅</li>
					<li>白切鸡</li>
					<li>红色乳鸽</li>
				</ul>
			</li>
		</ul>
		<script>
			var arr = document.querySelectorAll("li");
			for(i=0;i<arr.length;i++){
				var li = arr[i];
				li.onclick=function(e){
					try{
						this.firstElementChild.style.display = this.firstElementChild.style.display=="none"?"block":"none";
					}catch{
						e.cancelBubble = true;
					}
				}
			}
		</script>

五、表单验证正则表达式

在我们表单采集数据之前需要对用户输入的内容进行合法性校验所以需要表单验证

5.1 正则表达式

学习路线： 1 今天会用 2 走之前会看 3 五年以后会自己写

正则表达式，又称规则表达式,（Regular Expression，在代码中常简写为regex、regexp或RE），是一种文本模式，包括普通字符（例如，a 到 z 之间的字母）和特殊字符（称为"元字符"），是计算机科学的一个概念。正则表达式使用单个字符串来描述、匹配一系列匹配某个句法规则的字符串，通常被用来检索、替换那些符合某个模式（规则）的文本。

正则常用符号

1 在没有 ^和$的时候代表只要包含则匹配
2 . 代表任意字符
3 \ 代表转义符
4 * 匹配前面的子表达式任意次。例如，zo*能匹配“z”，也能匹配“zo”以及“zoo”。*等价于{0,}。
5 + 匹配前面的子表达式一次或多次(大于等于1次）。例如，“zo+”能匹配“zo”以及“zoo”，但不能匹配“z”。+等价于{1,}。
6 ? 匹配前面的子表达式零次或一次。例如，“do(es)?”可以匹配“do”或“does”。?等价于{0,1}。
7 {n} {n,} {n,m}      匹配次数
8 []                  匹配范围
9 ^匹配输入字行首。如果设置了RegExp对象的Multiline属性，^也匹配“\n”或“\r”之后的位置。
   $匹配输入行尾。如果设置了RegExp对象的Multiline属性，$也匹配“\n”或“\r”之前的位置。

正则表达式https://blog.youkuaiyun.com/xuemoyao/article/details/8033138?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165899260216781683926595%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=165899260216781683926595&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~top_positive~default-1-8033138-null-null.142%5Ev35%5Eexperiment_28w_v1&utm_term=%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F&spm=1018.2226.3001.4187

表单校验特效

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
		<style>
			fieldset{
				width: 500px;
				margin: 100px auto;
			}
			.form-control{
				margin-bottom: 30px;
			}
			.form-group{
				position: relative;
			}
			.form-group span{
				position: absolute;
				bottom: -25px;
				display: none;
			}
		</style>
	</head>
    <body>
		
		<fieldset id="">
			<legend>用户注册</legend>
				 	
				<form action="http://www.jd.com" method="post" id="tt">
				 	  <div class="form-group">
				 	    <label for="exampleInputEmail1">账号</label>
				 	    <input type="text" class="form-control" id="username" placeholder="请输入账号">
						<span class="text-muted">请输入账号 6-18位 不能用中文 开头必须是字母</span>
						<span class="text-success">账号可用</span>
						<span class="text-danger" >账号输入有问题 请正确输入</span>
				 	  </div>
				 	  <div class="form-group">
				 	    <label for="exampleInputPassword1">密码</label>
				 	    <input type="password" class="form-control" id="password" placeholder="请输入密码">
						<span class="text-muted">请输入账号 6-18位 不能用中文 开头必须是字母</span>
						<span class="text-success">密码可用</span>
						<span class="text-danger" >密码输入有问题 请正确输入</span>
				 	  </div>
				 	 <div class="form-group">
				 	   <label for="exampleInputPassword1">确认密码</label>
				 	   <input type="password" class="form-control" id="pwd" placeholder="请确认密码">
					   <span class="text-muted">请重复输入密码</span>
					   <span class="text-success">重复密码可用</span>
					   <span class="text-danger" >两次密码不一致</span>
				 	 </div>
					 <div class="form-group">
						<label for="exampleInputPassword1">邮箱</label>
						<input type="text" class="form-control" id="email" placeholder="请输入邮箱">
						<span class="text-muted">请正确输入您的邮箱</span>
						<span class="text-success">邮箱可用</span>
						<span class="text-danger" >邮箱输入有问题 请正确输入</span>
					  </div>
					  <button type="submit" class="btn btn-danger btn-block">注册</button>
				</form>
				
		<script>
			 //注册提交
			tt.onsubmit=function(){
				var arr =  document.querySelectorAll(".text-success");
				for(i=0;i<arr.length;i++){
					successSpan = arr[i];
					if(successSpan.style.display !="inline"){
						return false;
					}
				}
			}
			
			
			var regArr = [
				//帐号是否合法(字母开头，允许5-16字节，允许字母数字下划线)
				/^[a-zA-Z][a-zA-Z0-9_]{4,15}$/,
				//强密码(必须包含大小写字母和数字的组合，不能使用特殊字符，长度在8-10之间)
				/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$/,
				0,
				//Email地址
				/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
			]
			
			
			var arr = document.querySelectorAll(".form-control");
			for(i=0;i<arr.length;i++){
				var input =arr[i];
				input.aaa=i;
				input.onfocus=function(){
					this.parentNode.children[3].style.display="none";
					this.parentNode.children[4].style.display="none";
					this.parentNode.children[2].style.display="inline";
				}
				input.onblur = function(){
					if(this.aaa==2){
						regArr.splice(2,1,new RegExp("^"+password.value+"$"))
					}
					this.parentNode.children[2].style.display="none";
					if(this.value.length>0){
						if(regArr[this.aaa].test(this.value)){
							this.parentNode.children[3].style.display="inline";
						}else{
							this.parentNode.children[4].style.display="inline";
						}
					}
				}
			}
		</script>
		
	</body>
</html>