Ajax实现邮箱验证实例代码

更新时间：2022年04月26日 09:17:21 作者：農碼一生

这篇文章介绍了Ajax实现邮箱验证的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

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实现邮箱验证的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Android中Okhttp3实现上传多张图片同时传递参数
本篇文章主要介绍了Android中Okhttp3实现上传多张图片同时传递参数，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-02-02
iframe一次下载多个文件实例
这篇文章主要为大家介绍了iframe一次下载多个文件实现示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-01-01
JS中如何克隆对象(深克隆浅克隆递归克隆)
这篇文章主要介绍了JS中如何克隆对象(深克隆浅克隆递归克隆)的全面探索,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2024-01-01
重学JS之显示强制类型转换详解
这篇文章主要给大家介绍了关于重学JS之显示强制类型转换的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用JS具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2019-06-06
javascript设计模式 – 观察者模式原理与用法实例分析
这篇文章主要介绍了javascript设计模式 – 观察者模式,结合实例形式分析了javascript观察者模式相关概念、原理、用法及操作注意事项,需要的朋友可以参考下
2020-04-04
javascript高亮效果的二种实现方法
js高亮效果实现代码，直接静态页面即可，不用每次都要生成
2008-09-09
通过javascript进行UTF-8编码的实现方法
下面小编就为大家带来一篇通过javascript进行UTF-8编码的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-06-06
javascript淡入淡出效果的实现思路
这个思路是最近写XScroll.js类的时候想明白的。平常我们说的淡入淡出效果，一般分成两部分，一半是淡入，另一半就是淡出了。不过经过分析，我觉得其实只需要一半就行了
2012-03-03
小程序实现侧滑删除功能
这篇文章主要为大家详细介绍了小程序实现侧滑删除功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-06-06
使用Chrome调试JavaScript的断点设置和调试技巧
这篇文章主要介绍了使用Chrome调试JavaScript的断点设置和调试技巧,需要的朋友可以参考下
2014-12-12