html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>验证邮箱的地址是否已经注册</title>
<link rel="stylesheet" href="./assets/bootstrap/dist/css/bootstrap.min.css" rel="external nofollow" />
<style type='text/css'>
p:not(:empty){
padding: 15px;
}
.container{
padding-top: 100px;
}
</style>
</head>
<body>
<div class="container">
<label for="email">邮箱地址</label>
<input id="email" type="email" class="form-control" placeholder="请输入邮箱地址"/>
</div>
<!-- 错误 bg-danger 正确 bg-sucess -->
<p id="info"></p>
<script src="./js/ajax.js"></script>
<script>
var emailInput=document.getElementById('email');
var info=document.getElementById('info');
//添加离开焦点事件
emailInput.onblur=function(){
//获取邮箱输入框的值
var email=this.value;
//验证邮箱的正则
var reg = /^[A-Za-z\d] ([-_.][A-Za-z\d] )*@([A-Za-z\d] [-.]) [A-Za-z\d]{2,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){
info.innerHTML=result.message;
info.className='bg-success';
},
error:function(result){
info.innerHTML=result.message;
info.className='bg-danger';
},
});
}
</script>
</body>
</html>Ajax封装方法：
function ajax(options){
//定义默认
var defaults ={
type:'get',
url:'',
data:{},
Headers:{'Content-Type': 'application/x-www-form-urlencoded'},
success:function(){},
error:function(){}
};
//用options中的对象覆盖defaults中对象
Object.assign(defaults,options);
//创建
var xhr= new XMLHttpRequest();
//拼接请求参数变量
var params='';
//循环用户传递进来的对象格式参数
for(var attr in defaults.data){
//将参数转换成字符串格式
params = attr '=' defaults.data[attr] '&';
}
//字符串截取，将最后的&截取掉
params= params.substr(0,params.length -1);
//判断请求方式
if(defaults.type=='get'){
defaults.url=defaults.url '?' params;
}
//配置
xhr.open(defaults.type,defaults.url);
//发送请求
if(defaults.type=='post'){
//用户期望的向服务端传递的请求参数类型
var contentType=defaults.Headers['Content-Type'];
//post请求时必须设置的
xhr.setRequestHeader('Content-Type',contentType);
//判断请求参数类型
if(contentType=='application/json'){
xhr.send(JSON.stringify(defaults.data));
}else{
xhr.send(JSON.stringify(params));
}
}else{
xhr.send();
}
//监听onload事件,当接收完响应数据后触发
xhr.onload=function(){
//xhr.getResponseHeader()
//获取响应头部数据
var contentType=xhr.getResponseHeader('Content-Type');
//服务端返回的数据
var responseText=xhr.responseText;
if(contentType.includes('application/json')){
//把JSON字符串转换为JSON 对象
responseText = JSON.parse(responseText);
}
//对http状态码判断，判断是否等于200
if(xhr.status==200){
//调用处理成功情况的函数
defaults.success(responseText,xhr);
}else{
//调用处理失败的情况函数
defaults.error(responseText,xhr);
}
}
}服务器端测试代码：
/**** server.js ****/
// 一个简单的后端路由
//1.引入express框架
const express=require('express');
const fs=require('fs');
//2.引入路径处理模块
const path=require('path');
const bodyParser=require('body-parser');//post
//3.创建web服务器
const app=express();
//post
//extended:返回的对象是一个键值对，当extended为false的时候，键值对中的值就为'String'或'Array'形式，为true的时候，则可为任何数据类型。
//解析urlencoded
app.use(bodyParser.urlencoded({extended: false}));
//解析json
app.use(bodyParser.json());
//4.静态资源访问服务器功能
app.use(express.static(path.join(__dirname,'public')));
//5.配置路由 request 请求 response 响应,回应
//get路由 ，对应11.html
app.get('/verifyEmailAdress',(request,response)=>{
//响应
const email = request.query.email;
if (email == "1425271996@qq.com") {
response.status(400).send({message: "邮箱地址已被注册"})
} else {
response.send({message: "邮箱地址可用"})
}
});
//6.监听端口,进行回调
app.listen(3000,(err)=>{
// 函数体
if(!err) {
console.log('测试ajax请求的服务器开启成功了!');
console.log('正在监听3000端口...........');
}
});到此这篇关于Ajax实现邮箱验证的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持Devmax。