<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>驗(yàn)證郵箱的地址是否已經(jīng)注冊(cè)</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="請(qǐng)輸入郵箱地址"/>

    </div>
    <!-- 錯(cuò)誤 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');

        //添加離開(kāi)焦點(diǎn)事件
        emailInput.onblur=function(){
            //獲取郵箱輸入框的值
           var email=this.value;
           //驗(yàn)證郵箱的正則
           var reg = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/;
           //驗(yàn)證
           if( !reg.test(email)){
            //給出提示信息
            info.innerHTML='請(qǐng)輸入符合規(guī)則的郵箱地址';
            //添加樣式類名，錯(cuò)誤樣式
            info.className='bg-danger';
            //阻止程序向下執(zhí)行
            return;
           }
           //向服務(wù)器短發(fā)送請(qǐng)求
           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){
           
    //定義默認(rèn)
    var defaults ={
        type:'get',
        url:'',
        data:{},
        Headers:{'Content-Type': 'application/x-www-form-urlencoded'},
        success:function(){},
        error:function(){}
    };
    //用options中的對(duì)象覆蓋defaults中對(duì)象
    Object.assign(defaults,options);
    //創(chuàng)建
    var xhr= new XMLHttpRequest();
    //拼接請(qǐng)求參數(shù)變量
    var params='';
    //循環(huán)用戶傳遞進(jìn)來(lái)的對(duì)象格式參數(shù)
    for(var attr in defaults.data){
        //將參數(shù)轉(zhuǎn)換成字符串格式
        params+= attr +'='+ defaults.data[attr] +'&';
    }
    //字符串截取，將最后的&截取掉
    params= params.substr(0,params.length -1);

    //判斷請(qǐng)求方式
    if(defaults.type=='get'){
        defaults.url=defaults.url +'?'+ params;
    }

    //配置
    xhr.open(defaults.type,defaults.url);
    //發(fā)送請(qǐng)求
    if(defaults.type=='post'){
        //用戶期望的向服務(wù)端傳遞的請(qǐng)求參數(shù)類型
        var contentType=defaults.Headers['Content-Type'];
        //post請(qǐng)求時(shí)必須設(shè)置的
        xhr.setRequestHeader('Content-Type',contentType);
        //判斷請(qǐng)求參數(shù)類型
        if(contentType=='application/json'){
            xhr.send(JSON.stringify(defaults.data));
        }else{
            xhr.send(JSON.stringify(params));
        }
        
    }else{                
        xhr.send();
    }

    //監(jiān)聽(tīng)onload事件,當(dāng)接收完響應(yīng)數(shù)據(jù)后觸發(fā)
    xhr.onload=function(){
    //xhr.getResponseHeader()
    //獲取響應(yīng)頭部數(shù)據(jù)
    var contentType=xhr.getResponseHeader('Content-Type');
    //服務(wù)端返回的數(shù)據(jù)
    var responseText=xhr.responseText;
    if(contentType.includes('application/json')){
        //把JSON字符串轉(zhuǎn)換為JSON 對(duì)象
        responseText = JSON.parse(responseText);
    }

    //對(duì)http狀態(tài)碼判斷，判斷是否等于200
    if(xhr.status==200){
        //調(diào)用處理成功情況的函數(shù)
        defaults.success(responseText,xhr);
    }else{
        //調(diào)用處理失敗的情況函數(shù)
        defaults.error(responseText,xhr);
    }       
    
    }
}

服務(wù)器端測(cè)試代碼：

/**** server.js ****/
// 一個(gè)簡(jiǎn)單的后端路由

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

const fs=require('fs');

//2.引入路徑處理模塊
const path=require('path');
const bodyParser=require('body-parser');//post

//3.創(chuàng)建web服務(wù)器
const app=express();

//post
//extended:返回的對(duì)象是一個(gè)鍵值對(duì)，當(dāng)extended為false的時(shí)候，鍵值對(duì)中的值就為'String'或'Array'形式，為true的時(shí)候，則可為任何數(shù)據(jù)類型。
//解析urlencoded
app.use(bodyParser.urlencoded({extended: false}));
//解析json
app.use(bodyParser.json());

//4.靜態(tài)資源訪問(wèn)服務(wù)器功能
app.use(express.static(path.join(__dirname,'public')));


//5.配置路由 request 請(qǐng)求   response 響應(yīng),回應(yīng)
//get路由 ，對(duì)應(yīng)11.html
app.get('/verifyEmailAdress',(request,response)=>{
    //響應(yīng)
    const email = request.query.email;
	if (email == "1425271996@qq.com") {
		response.status(400).send({message: "郵箱地址已被注冊(cè)"})
	} else {
		response.send({message: "郵箱地址可用"})
	}    
});

//6.監(jiān)聽(tīng)端口,進(jìn)行回調(diào)
app.listen(3000,(err)=>{
    // 函數(shù)體
    if(!err) {
        console.log('測(cè)試ajax請(qǐng)求的服務(wù)器開(kāi)啟成功了!');
        console.log('正在監(jiān)聽(tīng)3000端口...........');
    }
});

到此這篇關(guān)于Ajax實(shí)現(xiàn)郵箱驗(yàn)證的文章就介紹到這了。希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: