验证邮箱格式---正则表达式

验证邮箱格式–正则表达式

效果

正确效果
在这里插入图片描述
错误效果
在这里插入图片描述

知识点

1.正则表达式
推荐在线正则表达式测试网站
http://tool.oschina.net/regex/

邮箱例子
26321@qq.com
26321@qq.com.cn
26321@163.com

ps:
[.] 只能匹配 . 这一字符

. 却可以匹配除\n所有字符
在这里插入图片描述
在这里插入图片描述

原理

1.给文本框添加失去焦点事件
1.1 获取文本框的值(当文本框的值大于6假设)
1.2 判断文本框的值是否匹配并添加相应的样式

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>验证邮箱</title>
	</head>
	<body>
	    请您输入邮箱地址:<input type="text" value=""  id="em" />  *<br />
		<script>
			//如果输入的是邮箱  那么背景颜色为绿色 否则为红色
			
			//为文本框注册失去焦点事件
			//1. 获取文本框的值  (当文本框的值>=6时)
			//2. 判断文本框的值是否属于邮箱格式并添加相应的样式
			
			//难点   正则表达式
			
			//邮箱格式  登录名@主机名.域名
			

			function my$(a){
				return document.getElementById(a);
			}
			
			my$("em").addEventListener("blur",function(){
				if(this.value.length>6){
					if(/^[0-9a-zA-Z.-_]+@[0-9a-zA-Z.-_]+(\.[a-zA-Z]+){1,2}$/.test(this.value))
					{
						this.style.backgroundColor="green";
						
					}
					else
					{
						this.style.backgroundColor="red";
					}
				}
				
			});
		</script>
	</body>
</html>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值