开发者社区> 姜白告> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

简介: 正则表达式 创建正则表达式: 方法一: var reg = /pattern/; 方法二:var reg = new RegExp('pattern'); RegExp 对象的常用方法: 示例: ...
+关注继续查看

正则表达式

创建正则表达式:

方法一: 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 元素属性

<input type ="button" value="click" onclick="check(this)"/ >

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>

输出:

 

 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
简单解析JavaScript中的正则表达式(三)
简单解析JavaScript中的正则表达式(三) 本片博客主要来和大家讲一下正则表达式实际的应用。 1.正则表达式的范围 [] 中括号用于查找某个范围内的字符: // [abc] 查找方括号之间的任何字符。 // [^abc] 查找任何不在方括号之间的字符。 除去 // [0-9] 查找任何从 0 至 9 的数字。 // [a-z] 查找任何从小写 a 到小写 z 的字符。 // [A-Z] 查找任何从大写 A 到大写 Z 的字符。 // [A-z] 查找任何从大写 A 到小写 z 的字符。 // [adgk] 查找给定集合内的任
0 0
简单解析JavaScript中的正则表达式(二)
简单解析JavaScript中的正则表达式(二) 上篇文章讲解了JavaScript中正则表达式的创建以及怎样在字符串方法中使用。这篇文章主要讲解正则表达式的属性和方法。 1.正则表达式的方法 // test() 测试 检索字符串中的值是否符合匹配的条件 true false var str="hello world"; var reg=/hellO/; console.log(reg.test(str)); // exec() 检索字符串中指定的值。 返回值的索引 没有 返回 null console.log(reg.ex
0 0
简单解析JavaScript中的正则表达式对象
简单解析JavaScript中的正则表达式对象 今天这篇篇博客来和大家讲一下JavaScript中的RegExp对象。 正则表达式:RegExp(Regular Expression)对象,简称正则式。时用来描述字符模式的对象,可以对字符串进行检索,匹配,替换等操作。 1.创建正则表达式 // 字面量 // 语法:var reg1=/表达式/修饰符 var reg=/a/igm; // 构造函数 // 语法:var reg2=new RegExp(表达式,修饰符) var reg2=new RegExp("a","igm"); /
0 0
JavaScript——正则表达式
正则表达式 正则表达式是用于匹配字符串字符组合的模式,在JavaScript中,正则表达式也是对象。 正则表通常被用来检索、替换那些符合某个模式(规则)的文本,例如验证表单:用户名表单只能输入英文字母、数字或者下划线, 昵称输入框中可以输入中文(匹配)。此外,正则表达式还常用于过滤掉页面内容中的一些敏感词(替换),或从字符串中获取我们想要的特定部分(提取)等 。 其他语言也会使用正则表达式,本阶段我们主要是利用 JavaScript 正则表达式完成表单验证。 特点 灵活性、逻辑性和功能性非常的强。 可以迅速地用极简单的方式达到字符串的复杂控制。 对于刚接触的人来说,比较晦涩难懂。比如:
0 0
🍉JavaScript进阶——正则表达式的那些事儿
🍉JavaScript进阶——正则表达式的那些事儿
0 0
JavaScript的正则表达式实现邮箱校验
JavaScript的正则表达式实现邮箱校验
0 0
JavaScript中 正则表达式的使用 及 常用正则表达式
JavaScript中 正则表达式的使用 及 常用正则表达式
0 0
JavaScript 字符串转正则表达式方法
JavaScript 字符串转正则表达式方法
0 0
JavaScript表单验证【正则表达式RegExp】
JavaScript表单验证【正则表达式RegExp】
0 0
JavaScript 进阶第十一章(正则表达式)(完结)
JavaScript 进阶第十一章(正则表达式)(完结)
0 0
+关注
文章
问答
文章排行榜
最热
最新
相关电子书
更多
JavaScript函数
立即下载
JavaScript 语言在引擎级别的执行过程
立即下载
Javascript中的函数
立即下载