验证邮箱地址唯一性

最新推荐文章于 2024-07-18 10:24:09 发布

xiexinxia

最新推荐文章于 2024-07-18 10:24:09 发布

阅读量259

点赞数

文章标签： html ajax

本文链接：https://blog.csdn.net/xieixnxia/article/details/120166650

版权

实现步骤：

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

<!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>

xiexinxia

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
验证邮箱地址唯一性

实现步骤：获取文本框并为其添加离开焦点事件离开焦点时，检测用户输入的邮箱地址是否符合规则如果不符合规则，阻止程序向下执行并给出提示信息向服务器端发送请求，检测邮箱地址是否被注册根据服务器端返回值决定向客户显示何种提示信息<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>验证邮箱是否已经注册</title> <st
复制链接

扫一扫