验证邮箱地址唯一性

最新推荐文章于 2025-03-27 16:21:19 发布

原创最新推荐文章于 2025-03-27 16:21:19 发布 · 367 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #ajax

该博客详细介绍了如何实现一个邮箱验证功能，当用户在文本框中输入邮箱地址失去焦点时，会检测输入是否符合邮箱格式。如果格式正确，程序会通过Ajax向服务器发送请求，检查邮箱是否已被注册。根据服务器响应，向用户展示相应的成功或错误提示信息。

实现步骤：

获取文本框并为其添加离开焦点事件
离开焦点时，检测用户输入的邮箱地址是否符合规则
如果不符合规则，阻止程序向下执行并给出提示信息
向服务器端发送请求，检测邮箱地址是否被注册
根据服务器端返回值决定向客户显示何种提示信息

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>验证邮箱是否已经注册</title>
	<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" class="form-control" placeholder="请输入邮箱地址" id="email">
		</div>

		<p id="info"></p>

	</div>
	<script src="/js/ajax.js"></script>
	<script type="text/javascript">
		//获取元素
		var emailInp = document.getElementById('email');
		var info = document.getElementById('info');

		//离开焦点
		emailInp.onblur = function() {
			var email = this.value;

			var reg = /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/;
			if(!reg.test(email)){
				
				info.innerHTML = '请输入符合规则的邮箱地址';
				info.className ='bg-danger';
				return;

			}
			ajax({
				type: 'get',
				url: 'http://localhost:3000/verifyEmailAdress',
				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>