JS表单验证案例

1.H5验证
H5验证主要体现在新增的标签和属性中，但它的验证并不严格，容易出错

2.label标签补充：
label标签为 input 元素定义标注（标记）。

label 元素不会呈现任何特殊效果。不过，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

label标签的 for 属性应当与相关元素的 id 属性相同。

<form action="demo_form.asp">
 <label for="male">Male</label>//for属性值与关联input的id保持一致
 <input type="radio" name="sex" id="male" value="male"><br>
 <label for="female">Female</label>
 <input type="radio" name="sex" id="female" value="female"><br>
 <input type="submit" value="提交">
</form>

label 标签的form 属性规定 label元素所属的一个或多个表单，以空格分隔。

<form action="demo-form.php" id="form1">
  <input type="radio" name="sex" id="male" value="male"><br>
  <label for="female">Female</label>
  <input type="radio" name="sex" id="female" value="female">
  <input type="submit" value="提交">
</form>

<label for="female" form="form1">Male</label>//位于form表单外的label元素，但仍然属于表单的一部分

3.input的type属性值为password时，输入值为隐匿形式
进行验证时，正则中如果有选择（|），左右两边都应该进行首尾匹配，例：

/^\d{15}$|^\d{17}[0-9x]$/
/^13[0-9][0-9]{8}$|^15[0-35-9][0-9]{8}$|^18[025-9][0-9]{8}$/

list-style:none 去除li ul的列表标识

4.window.location 对象
既是window对象的属性，也是document对象的属性
location.href 返回当前加载页面的完整url
location.href = “www.baidu.com” 可以与事件配合达成转换网页的效果

mainInner.btn.addEventListener("click",function(){//为按钮绑定事件
	for(obj in test){//如果test中有false就不跳转
		if(!obj){
			return;
		}
	}
	if(mainInner.choose.checked){//选择框被选中时为true,否则为false
		window.location.href = "http://www.imooc.com";
	}//点击后跳转网页，且生成一个历史记录，可以后退
});

location.hash 返回URL中的hash（#号后跟零或多个字符），如果不包含则返回空字符
location.hash = “#top” 可以通过设置锚链接进行网页内外的跳转

location.host 返回服务器名称和端口号（如果有）

location.hostname 返回不带端口号的服务器名称

location.pathname 返回URL中的目录和（或）文件名

location.port 返回URL中指定的端口号，如果没有，返回空字符串

location.protocol 返回页面使用的协议

location.search 返回URL的查询字符串，这个字符串以问号开头（较常用）

location.replace(“www.baidu.com”); 重新定向URL，但不会在历史记录中生成新记录，后退按钮不可用

location.reload() 不传递任何参数，页面会以最有效的方式重新加载（有可能从缓存中加载）；
location.reload(true) 从服务器重新加载。
一般放在代码最后

5.事件冒泡与捕获
解释器创建一个event对象后，会按如下过程将其在HTML元素间进行传播
第一阶段：事件捕获，事件对象沿DOM树向下传播
第二阶段：目标触发，运行事件监听函数
第三阶段：事件冒泡，事件沿直系亲属DOM树向上传播

IE的事件模型中没有“事件捕获”阶段
事件冒泡：直系亲属树结构中，点击某个元素，由于冒泡作用，亲属树上的上层元素凡是添加了事件的，都会被触发（先下层再上层）

事件捕获：与事件冒泡相反，先上层再下层
大部分情况都使用事件冒泡

事件委托：基于事件冒泡

	<ul id="parent">
		<li id="one">item1</li>
		<li id="two">item2</li>
		<li id="thr">item3</li>
		<li id="four">item4</li>
		<li id="fiv">item5</li>
		<li id="six">item6</li>
	</ul>
	<script>
		var ul = document.getElementById("parent");
		ul.addEventListener("click",function(event){//将事件绑定在父元素上
			var ids = ["one","two","thr","four","fiv","six"];
			alert(ids.indexOf(event.target.id)+1);
		})；
	</script>

事件委托就是将事件绑定在父元素上，通过事件冒泡机制达到效果
event.target表示点击事件发生的当前元素，相当于已经获取到该元素

6.部分程序记录
下拉菜单的出现与消失

wrapInner.imooc.addEventListener("mouseover",function(e){//绑定下拉菜单出现的事件
	wrapInner.floatList.style.display = "block";
	e.stopPropagation();//关键在于阻止冒泡
}) ;

wrapInner.floatList.addEventListener("mouseover",function(e){//绑定事件使下拉菜单在鼠标保持在其内时不消失
	e.stopPropagation();//阻止冒泡，所以下拉菜单不会消失
});

document.addEventListener("mouseover",function(){
	wrapInner.floatList.style.display = "none";//监听整个文档，除了已经阻止冒泡的部分
	//一旦监听到事件说明鼠标已经移出下拉菜单，就关闭下拉菜单
});

CSS画三角形

header .wrap nav .nav-1 #triangle{
	/*画出向下的三角形*/
	width: 0;
	height: 0;
	border-top: 10px solid black;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
}