Js之DOM、正则表达式

DOM编程

通过document集合属性获取标签对象

<script>
		//document集合属性获取标签对象
		//all:获取当前页面所有的html标签对象,返回的是标签对象列表(数组)
		// var nodeList = document.all ;
		
		//forms:获取当前页面中所有的form标签对象,返回的数组
		
		//var nodeList = document.forms ;
		
		//links:获取所有a 对象和所有 area 对象的集合(area标签:热点域),如果页面中只有a标签,获取所有的a标签对象的集合
		
		//images:获取当前页面中所有的img标签对象的集合,返回数组
		// var nodeList = document.images ;
		var nodeList = document.links ;
		alert(nodeList.length) ;
		
		//alert(nodeList.length) ;
		//节点(标签对象)的节点名称:nodeName属性
		for(var i = 0 ; i < nodeList.length ; i ++){
			// document.write(nodeList[i].nodeName+"<br/>") ;
			alert(nodeList[i].nodeName) ;
		}
		
		
		
	</script>

通过查询节点关系获取标签对象

<script>
		/**
		 * parentNode:父节点
		 * childNodes:子节点
		 * firstChild:第一个子节点
		 * lastChild:最后一个子节点
		 * nextSibling:下一个兄弟节点
		 * previousSibling:上一个兄弟节点
		 * 
		 */
		
		//1)获取第一个a标签对象
		/* var aNode = document.links[0] ;
		alert(aNode.nodeName) ; */
		
		//2)获取aNode标签对象的父节点
		/* var bodyNode = aNode.parentNode ;
		alert(bodyNode.nodeName) ; */
		
		//3)获取bodyNode下面的所有的子节点:childNodes
		/**
		 * 所有的子节点:
		 * 空格和换行:是能够被解析出来的
		 * 
		 * 有一个属性nodeType:节点类型
		 * 
		 */
		
		/* var nodeList = bodyNode.childNodes ;
		for(var i  = 0 ; i < nodeList.length ; i ++){
			//document.write(nodeList[i].nodeName+"<br/>") ;
			alert(nodeList[i].nodeName+"-----"+nodeList[i].nodeType)
		} */
		
		//获取bodyNode的第一个子节点
		/* var first = bodyNode.firstChild ;
		alert(first.nodeName); */
		
		//获取bodyNode的最后一个子节点
		/* var last = bodyNode.lastChild ;
		alert(last.nodeName); */
		
		//获取第二个a标签对象
		var aNode = document.links[1] ;
		alert(aNode.nodeName);
		
		//获取aNode标签对象下一个兄弟节点
		var next = aNode.nextSibling ;
		alert(next.nodeName);
		
		//获取next节点对象上一个兄弟节点
		var previous = next.previousSibling ;
		alert(previous.nodeName);
		
		
	</script>

通过document对象的方法获取标签对象

<script>
		//document对象的方法
		//getElementById("id属性值"):注意:id属性值在页面中唯一的
		//getElementsByClassName("class属性值"):通过class属性值获取标签对象列表
		//getElementsByTagName("标签名称"):通过标签名称获取标签对象列表
		//getElementsByName("name属性值"):通过name属性值获取标签对象列表
		//需求:文本框输入内容,失去焦点,将用户名的内容弹出来
		function getName(){
			//通过id属性值获取标签对象(推荐第一种)
			var username = document.getElementById("username") ;
			
			//通过class值也能获取标签对象
			//var username = document.getElementsByClassName("classInp")[0] ;
			
			//方式3
			//var username = document.getElementsByTagName("input")[0] ;
			
			//方式4
			//var username = document.getElementsByName("user")[0] ;
			//获取内容
			//value属性获取
			alert(username.value) ;
		}
		
	</script>

正则表达式

字符	含义
\d	0-9之间的任意一个数字 \d只占一个位置
\w	数字，字母 ，下划线 0-9 a-z A-Z _
\s	空格或者空白等
\D	除了\d
\W	除了\w
\S	除了\s
.	除了\n之外的任意一个字符
\	转义字符
|	或者
()	分组
\n	匹配换行符
\b	匹配边界 字符串的开头和结尾 空格的两边都是边界 => 不占用字符串位数
^	限定开始位置 => 本身不占位置
$	限定结束位置 => 本身不占位置
[a-z]	任意字母 []中的表示任意一个都可以
[^a-z]	非字母 []中^代表除了
abc]	abc三个字母中的任何一个 [^abc]除了这三个字母中的任何一个字符
*	0到多个
+	1到多个
?	0次或1次 可有可无
{n}	正好n次
{n,}	n到多次
{n,m}	n次到m次

原生js表单校验

			function userCheck(){
				var userInput = document.getElementById("username");
				var username = userInput.value;
				var reg = /^[a-zA-Z0-9]{6,15}$/;
				if(reg.test(username)){
					userInput.style.borderColor = "skyblue";
					return true;
				}else{
					userInput.style.borderColor = "red";
					return false;
				}
			}
			function pwdCheck(){
				var pwdInput = document.getElementById("password");
				var password = pwdInput.value;
				var reg = /^[a-zA-Z0-9]{6,15}$/;
				if(reg.test(password)){
					pwdInput.style.borderColor = "skyblue";
					return true;
				}else{
					pwdInput.style.borderColor = "red";
					return false;
				}
			}
			function pwd2Check(){
				var password = document.getElementById("password").value;
				var pwdInput2 = document.getElementById("password2");
				var password2 = pwdInput2.value;
				if(password==password2){
					pwdInput2.style.borderColor = "skyblue";
					return true;
				}else{
					pwdInput2.style.borderColor = "red";
					return false;
				}
			}
			function emailCheck(){
				var emailInput = document.getElementById("email");
				var email = emailInput.value;
				var reg = /^[a-zA-Z0-9]+@[a-zA-Z0-9]+(\.[a-z]){1,2}$/;
				if(reg.test(email)){
					emailInput.style.borderColor = "skyblue";
					return true;
				}else{
					emailInput.style.borderColor = "red";
					return false;
				}
			}
			function nameCheck(){
				var nameInput = document.getElementById("name");
				var name = nameInput.value;
				var reg = /^[\u4E00-\uFA29]|[\uE7C7-\uE7F3]|[a-zA-Z0-9]$/;
				if(reg.test(name)){
					nameInput.style.borderColor = "skyblue";
					return true;
				}else{
					nameInput.style.borderColor = "red";
					return false;
				}
			}	
			function allCheck(){
				if(userCheck()&&pwdCheck()&&pwd2Check()&&emailCheck()&&nameCheck()){
					return true;
				}else{
					alert("请确保您的信息填写正确!!!");
					return false;
				}
			}
		

html

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<link href="css/register.css" rel="stylesheet" style="text/css"/>
		
		<script src="js/regist.js" type="text/javascript" charset="utf-8"></script>
		
	</head>
	<body>
		
		<div id="body">
			<div id="top">
				<font size="4px" color="steelblue" >注册</font>
				&nbsp;&nbsp;
				<font size="3px" color="silver">REGISTER</font>
			</div>
			<form action="index.html" method="get" onsubmit="return allCheck()">
				<table id="table" border="0px" cellspacing="" cellpadding="">
					<tr>
						<td id="text">用户名</td>
						<td><input type="text" onblur="userCheck()" id="username" class="input" placeholder="请输入用户名"/></td>
					</tr>
					<tr>
						<td id="text">密码</td>
						<td><input type="password" onblur="pwdCheck()" class="input" id="password" placeholder="请输入密码" /></td>
					</tr>
					<tr>
						<td id="text">确认密码</td>
						<td><input type="password" onblur="pwd2Check()"  class="input" id="password2" placeholder="请确认密码"/></td>
					</tr>
					<tr>
						<td id="text">邮箱</td>
						<td><input type="email" onblur="emailCheck()" class="input" id="email" placeholder="请输入邮箱" /></td>
					</tr>
					<tr>
						<td id="text">姓名</td>
						<td><input type="text" onblur="nameCheck()" class="input" id="name" placeholder="请输入姓名"/></td>
					</tr>
					<tr>
						<td id="text">性别</td>
						<td>
							<input type="radio" name="sex" checked="checked" value="男" class="sex" /><font color="slateblue">男</font>
							<input type="radio" name="sex" value="女" class="sex" /><font color="slateblue">女</font>
						</td>
					</tr>
					<tr>
						<td id="text">出生日期</td>
						<td><input type="date" class="input" required="required" id="date" /></td>
					</tr>
					<tr>
						<td id="text">验证码</td>
						<td><input type="text" id="code" placeholder="请输入验证码"/></td>
					</tr>
				</table>
				
				<input type="submit"  id="sumbit" value="立即注册" />
				
				
				
			</form>
		</div>
		
		
	</body>
</html>

CSS

#body{
			width: 60%;
			height: 650px;
			position: relative;
			margin: 150px auto;
			border:5px solid #A9A9A9;
		}
		
		#body #table{
			
			width: 80%;
			position: relative;
			margin: 0 auto;
			margin-top: 20px;
		}
		#table .input{
			width: 350px;
			height: 25px;
		}
		/* #table .input:hover{
			background-color: skyblue;
		} */
		tr{
			height: 50px;
		}
		td{
			margin-top: auto;
			margin-bottom: auto;
		}
		
		#text{
			float:right;
			margin-right: 15px;
			color: #6495ED;
			font-weight: bold;
			margin-top: 15px;
		}
		.sex{
			width: 30px;
			height: 15px;
		}
		#code{
			width: 150px;
			height: 25px;
		}
		#sumbit{
			height: 30px;
			width: 80px;
			margin-top: 30px;
			margin-left: 300px;
			background-color: coral;
			border-radius:3px;
		}
		#top{
			margin-top: 50px;
			margin-left: 100px;
		}