Ajax学习笔记——验证邮箱唯一性案例

最新推荐文章于 2022-03-13 17:21:21 发布

是行是行啊

最新推荐文章于 2022-03-13 17:21:21 发布

阅读量408

点赞数

分类专栏： Ajax学习文章标签： nodejs js

本文链接：https://blog.csdn.net/weixin_45655555/article/details/106764689

版权

Ajax学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Ajax学习笔记——验证邮箱唯一性案例

在node.js搭建的服务器进行

在这里插入图片描述

步骤：

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

客户端代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" href="/assets/bootstrap/dist/css/bootstrap.min.css">
		<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= "/js/ajax.js"></script>
	<script type="text/javascript">
	// 1.获取页面元素,文本框
	var emailInp = document.getElementById('email');
	var info = document.getElementById('info');

	// 2.添加离开焦点事件
	emailInp.onblur = function(){
		// 3.获取用户输入的地址值
		var email = this.value;
		// 4. 先判断输入的地址格式是否符合规则（使用正则表达式）
		var reg = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/;
		// 4.输入不对给提示，输入对就发送到服务器去判断
		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>

服务器代码：

// 引入express框架
const express = require('express');

// 路径处理模块
const path = require('path');

//创建web服务器
const app = express();

//静态资源访问服务功能
app.use(express.static(path.join(__dirname,'public')));

//邮箱地址验证
app.get('/verifyEmailAdress',(req,res)=>{
	//接收客户端传递过来的邮箱地址
	const email = req.query.email;
	//判断邮箱地址注册过的情况
	if(email == 'lisi@lisi.cn' ){
		res.status(400).send({message:'邮箱地址已经注册过了，请更换其他邮箱地址'});
	}else{
		res.send({message:'恭喜，邮箱地址可用'})  //这返回的是一个对象
	}
})
//监听
app.listen(3000);
console.log('服务器启动成功');