您现在的位置是：首页 > 文章详情

JavaScript 基础--- (正则表达式 / 事件监听与绑定)

日期：2018-07-31点击：486收藏

正则表达式

创建正则表达式：

方法一： var reg = /pattern/;

方法二：var reg = new RegExp('pattern');

RegExp 对象的常用方法：

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			var str = 'awddsafasei';
			var reg = new RegExp('weiwel');
			var reg = /weiwei/;
		
			//正则表达式中有两个方法  exec() :返回，符合条件的字符串   test():
			alert(reg.exec(str));
			alert(reg.test(str));
			
		</script>
	</head>
	<body>
	</body>
</html>

输出：

2.正则表达式所支持的常用通配符

3.正则表达式量词

4.正则表达式修饰符

案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
		var str = 'awddsafasei';
		var reg = /^a(\w){2,}i$/g;
			//正则表达式中有两个方法  exec() :返回，符合条件的字符串   test():
			alert(reg.exec(str));
			alert(reg.test(str));
			
		</script>
	</head>
	<body>
	</body>
</html>

输出：

事件绑定

HTML 事件：

示例：点击按钮，弹出警示框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
	</head>
	<body>
		<input type="button" id="button1" value="button1"/>
		
	</body>
	<script type="text/javascript">
		document.getElementById("button1").onclick = fun;	
		
		function fun(){
			alert('hello');
		}
	</script>
</html>

输出：点击---弹出

事件监听

使用返回值改变 HTML 元素的默认行为（可以通过在绑定事件中加上 return false 来阻止其默认行为）

通用性的事件监听方法：

1.绑定 HTML 元素属性

2.绑定 DOM 对象属性

document.getElementById("btn1").onclick=test;

推荐尽量采用与浏览器无关的事件绑定方法，保证有更好的跨浏览器特性

标准DOM中的事件监听方法：

1.[object].addEventListener("事件类型","处理函数","冒泡事件或捕获事件")

2.[object].removeEventListener("事件类型","处理函数","冒泡事件或捕获事件")

案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input type="text" id="username" value="" />
		<div id="div1" style="width:100px;height: 50px;background: red;">
			<input type="button" id="button1" value="button1"/>
		</div>
		
	</body>
	
	<script type="text/javascript">
		var username = document.getElementById("username");
		/*username.addEventListener("focus",function(){
			alert('focus');
		})
		*/
        // 获取焦点弹出警示框
		username.onblur = function(){
			alert('blur');
		}
		//焦点消失弹出警示框
		
		var btn = document.getElementById("button1");
		var div1 = document.getElementById("div1");
		
		btn.addEventListener("click",btnclick);
		
		function btnclick(){
			alert('button');
		}
		
		div1.addEventListener("click",function(){
			alert('div1');
		},false);
		
		div1.addEventListener("mouseout",function(){
			alert('mousedo');
		})
        //鼠标移入 div1 中就弹出警示框
	</script>
</html>

输出：点击、获取焦点，失去焦点，鼠标移入红色区域均弹出警示框

、

综合案例：注册验证

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<form action="" method="post">
			用户名：<input type="text" id="username" onchange="checkUn()"/>
			<span id="unspan" style="color: red;">
				
			</span><br />
			密码：<input type="text" id="password"/><br />
			手机号：<input type="text" id="phone" onchange="checkPhone()"/>
			<span id="phonespan" style="color: red;">
				
			</span>
			<br />
			邮箱：<input type="text" id="email" onchange="checkEmail()"/>
			<span id="emailspan" style="color: red;">
				
			</span>
			<br />
			
			<input type="submit" value="提交"/>
		</form>
	</body>
	<script type="text/javascript">
		
		
		//校验用户名
		function checkUn(){
			var reg = /(\w){4,}/
			var username = document.getElementById("username").value;
			if(!reg.test(username)){
				document.getElementById('unspan').innerHTML = '用户名最少四个字符';
			}else{
				document.getElementById('unspan').innerHTML = '';			
			}
		}
		
		function checkPhone(){
			//15944556789
			var reg = /^1[3578](\d){9}/;
			var phone = document.getElementById("phone").value;
			if(!reg.test(phone)){
				document.getElementById('phonespan').innerHTML = '手机号格式不正确';
			}else{
				document.getElementById('phonespan').innerHTML = '';
			}
		}
		
		function checkEmail(){
			//weiwei234@163.com.cn
			var reg = /^[a-zA-Z_](\w){2,12}@[a-zA-Z0-9]{2,7}((\.)([a-zA-Z]){2,3}){1,2}$/;
			var email = document.getElementById("email").value;
			if(!reg.test(email)){
				document.getElementById('emailspan').innerHTML = '邮箱格式不正确';
			}else{
				document.getElementById('emailspan').innerHTML = '';
			}
		}
	</script>
</html>

输出：