验证邮箱地址唯一性
注：未贴出服务器端代码，只贴出前端界面代码，Ajax封装代码见前两天的博客代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<style type="text/css">
p:not(:empty){
padding:15px;
}
.container{
padding-top: 100px;
}
</style>
</head>
<body>
<div class="container">
<div class="form-group">
<label>邮箱地址</label>
<input type="email" id="email" class="form-control" placeholder="请输入邮箱地址">
</div>
<!-- 错误 bg-danger 正确 bg-success -->
<p id="info"></p>
</div>
<script src="./Ajax封装完成函数.js"></script>
<script>
// 获取页面中的元素
var email = document.getElementById('email');
var info = document.getElementById('info');
//验证邮箱地址的正则表达式
var reg =/^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/;
// 当文本框离开焦点以后
email.onblur = function(){
var email = this.value;
// 如果用户输入的邮箱地址不符合规则
if(!reg.test(email)){
// 给出用户提示
info.innerHTML = '请输入符合规则的邮箱地址';
//让提示信息显示为错误提示信息的样式
info.className = 'bg-danger';
// 阻止程序向下执行
return;
}
ajax({
url: 'http://localhost/check',
data:{
email:email
},
success:function(result){
console.log(result);
info.innerHTML = result.message;
info.className = 'bg-success';
},
error:function(result){
console.log(result);
info.innerHTML = result.message;
info.className = 'bg-danger';
}
});
}
</script>
</body>
</html>
