您的位置：首页 > Web前端 > JavaScript

JS中的邮箱验证

2017-09-25 09:16 204 查看

通过js在前端对用户输入进行校验，即可以产生较好的交互体验，也可以减轻后台的压力。

邮箱的基本格式要求

1.只能以单词字符开头，即a-z，A-Z，0-9

2.只能有一个@

3.@后面有一个到多个点，并且点不能在最后

4.特殊字符不能开头和结尾

使用正则表达式进行校验

var reg =/^[A-Za-z0-9]+([-_.][A-Za-z0-9]+)*@([A-Za-z0-9]+[-.])+[A-Za-z0-9]{2,5}$/;
var state=reg.test(email); //email是从输入框中读取的值

经过以上两条语句，若符合格式要求，state的结果是true，否则是false

简单解释一下以上正则表达式的内容

^表示匹配串的开始

[A-Za-z0-9]+ 表示匹配一个到多个单词字符，+表示前面的模式出现一次到多次

([-_.][A-Za-z0-9]+)* 表示匹配特殊字符和单词字符的结合体0次到多次，因为特殊字符不能与@相邻，所以有特殊字符的时候必须后面跟着一个或者多个单词字符

@ 表示匹配@字符

([A-Za-z0-9]+[-.])+ 表示匹配单词字符和特殊字符的结合体1次到多次，因为特殊字符不能与@相邻，所以有特殊字符的时候必须前面有一个或者多个单词字符，跟我们的域名xxx.xxx.xxx匹配

[A-Za-zd]{2,63} 表示匹配单词字符个数为2到5之间，因为每一项域名的域的最短长度是2，像.cn等等，最长的长度是63

一个小demo

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>My page</title>
</head>
<body>
<script type="text/javascript">
function fun(){

var UserName=document.myform.UserName.value;
var span_UserName=document.getElementById("UserName");

var password=document.myform.password.value;
var span_password=document.getElementById("password");

var password_again=document.myform.password_again.value;
var span_password_again=document.getElementById("password_again");

var NikeName=document.myform.NikeName.value;
var span_NikeName=document.getElementById("NikeName");

var email=document.myform.email.value;
var span_email=document.getElementById("email");

var tag=true;

if(UserName==""){
span_UserName.innerHTML="用户名不得为空";
span_UserName.style.color="red";
tag=false;
}
if(password==""){
span_password.innerHTML="密码不得为空";
span_password.style.color="red";
tag=false;
}
if(password_again==""){
span_password_again.innerHTML="密码不得为空";
span_password_again.style.color="red";
tag=false;
}

if(password!="" && password_again!="" && password!=password_again){
span_password_again.innerHTML="两次密码输入不一致";
span_password_again.style.color="red";
tag=false;
}

if(NikeName==""){
span_NikeName.innerHTML="昵称不得为空";
span_NikeName.style.color="red";
tag=false;

}
if(email==""){
span_email.innerHTML="邮箱不得为空";
span_email.style.color="red";
tag=false;

}else{

var reg =/^[A-Za-z0-9]+([-_.][A-Za-z0-9]+)*@([A-Za-z0-9]+[-.])+[A-Za-z0-9]{2,5}$/;

var state=reg.test(email);

if(!state){
span_email.innerHTML="请输入正确的邮箱格式";
span_email.style.color="red";
tag=false;
}
}

if(tag){
document.myform.submit();
window.alert("成功注册");
}

}

</script>
<h1 align="center">用户登录</h1>
<form name="myform" >
<table  name="mytable" align="center">
<tr>
<td>用户名：</td>
<td><input type="text" name="UserName" ></td>
<td><span id="UserName"></span></td>
</tr>
<tr>
<td>密码：</td>
<td><input type="password" name="password" ></td>
<td><span id="password"></span></td>
</tr>
<tr>
<td>确认密码：</td>
<td><input type="password" name="password_again" ></td>
<td><span id="password_again"></span></td>
</tr>
<tr>
<td>昵称：</td>
<td><input type="text" name="NikeName" ></td>
<td><span id="NikeName"></span></td>
</tr>
<tr>
<td>邮箱：</td>
<td><input type="text" name="email" ></td>
<td><span id="email"></span></td>
</tr>
<tr>
<td>
</td>
<td>
<input type="button" onclick="fun()" value="注册用户" >
</td>
</tr>
</table>

</form>
</body>
</html>

错误输入

错误提示

正确输入

正确提示

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 邮箱正则表达式 javascript 前端

相关文章推荐

新的分享

章节导航