验证邮箱格式–正则表达式
效果
正确效果
错误效果
知识点
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>