验证邮箱地址唯一性
运行结果
案例步骤
1.获取文本框并为其添加离开焦点事件
2.离开焦点时,检测用户输入的邮箱地址是否符合规则
3.如果不符合规则,阻止程序向下执行并给出提示信息
4.向服务端发送请求,验证邮箱地址是否被别人注册过
5.根据服务器端返回值决定为客户端显示何种提示信息
6. 开启服务器,在浏览器地址栏中，输入localhost:3000/验证邮箱地址唯一性.html
7. 实现效果
HTML代码
<body><div class="container"><label for="">邮箱地址:</label><input type="email" id="email" placeholder="请输入"><p id="info"></p></div> </body>
CSS代码
<style>*{margin: 0;padding: 0;}.container{margin: 50px 100px;}.container #email{outline: none;text-indent: 2px;}// 邮箱输入正确.bg-success{background-color: rgba(0, 128, 100, 0.575);}// 邮箱输入错误.bg-fail{background-color: rgba(255, 51, 0, 0.863);}#info{height: 40px;margin-top: 40px;line-height: 40px;}</style>
JS代码
将ajax.js文件引入到该页面中,发送请求时直接调用封装的ajax函数，函数代码传送门:ajax函数
<script src="./js/ajax.js"></script><script>var emailinp = document.querySelector('#email');var info = document.querySelector('#info');var reg=/^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/;emailinp.addEventListener('blur',function(){// 获取用户输入的邮箱地址var email = this.value;// 如果用户输入的内容不符合规则if(!reg.test(email)){info.innerHTML = '请输入符合规则的邮箱地址';info.className = 'bg-fail';// 阻止程序向下运行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-fail';}})})</script>
完整代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>验证邮箱地址唯一性</title><style>*{margin: 0;padding: 0;}.container{margin: 50px 100px;}.container #email{outline: none;text-indent: 2px;}.bg-success{background-color: rgba(0, 128, 100, 0.575);}.bg-fail{background-color: rgba(255, 51, 0, 0.863);}#info{height: 40px;margin-top: 40px;line-height: 40px;}</style></head><body><div class="container"><label for="">邮箱地址:</label><input type="email" id="email" placeholder="请输入"><p id="info"></p></div> </body><script src="./js/ajax.js"></script><script>var emailinp = document.querySelector('#email');var info = document.querySelector('#info');var reg=/^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/;emailinp.addEventListener('blur',function(){// 获取用户输入的邮箱地址var email = this.value;// 如果用户输入的内容不符合规则if(!reg.test(email)){info.innerHTML = '请输入符合规则的邮箱地址';info.className = 'bg-fail';// 阻止程序向下运行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-fail';}})})</script></html>
服务器端代码
// 引入express模块const express = require('express');// 引入path模块,处理路径const path = require('path');// 创建服务器const app = express();// 静态资源访问功能app.use(express.static(path.join(__dirname,'public')));app.get('/verifyEmailAdress',(req,res)=>{res.send({message:'恭喜您,输入了正确的邮箱地址'});})app.get('/verifyEmailAdress',(req,res)=>{res.status(400).send({message:'对不起,该地址已经被注册过了'});})// 监听端口app.listen(3000);// 控制台显示输出console.log('网站服务器启动成功');
