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

最新推荐文章于 2021-08-06 06:23:29 发布

是行是行啊

最新推荐文章于 2021-08-06 06:23:29 发布

阅读量393

点赞数

分类专栏： 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('服务器启动成功');

服务器返回的是一个对象
p: not(:empty) { padding: 15px; } ——这句什么意思啊

是行是行啊

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
Ajax学习笔记——验证邮箱唯一性案例

Ajax学习笔记——验证邮箱唯一性案例在node.js搭建的服务器进行步骤：获取文本框并为其添加离开焦点事件离开焦点时，检测用户输入的邮箱地址是否符合规则如果不符合规则，组织程序向下执行并给出提示信息向服务器端发送请求，检测邮箱地址是否被别人注册根据服务器返回值决定客户端显示何种提示信息...
复制链接

扫一扫