案例:验证邮箱地址唯一性(ajax)

一.步骤

  1. 获取文本框并为其添加离开焦点事件
  2. 离开焦点时，检测用户输入的邮箱地址是否符合规则
  3. 如果不符合规则，阻止程序向下执行并给出提示信息
  4. 向服务器端发送请求，检测邮箱地址是否被别人注册
  5. 根据服务器端返回值决定客户端显示何种提示信息
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>验证邮箱地址是否已经注册</title>
 6     <link rel="stylesheet" href="/assets/bootstrap/dist/css/bootstrap.min.css">
 7     <style type="text/css">
 8         p:not(:empty) {
 9             padding: 15px;
10         }
11         .container {
12             padding-top: 100px;
13         }
14     </style>
15 </head>
16 <body>
17     <div class="container">
18         <div class="form-group">
19             <label>邮箱地址</label>
20             <input type="email" class="form-control" placeholder="请输入邮箱地址" id="email">
21         </div>
22         <!-- 错误 bg-danger 正确 bg-success -->
23         <p id="info"></p>
24     </div>
25     <script src="/js/ajax.js"></script>
26     <script>
27         // 获取页面中的元素
28         var emailInp = document.getElementById('email');
29         var info = document.getElementById('info');
30 
31         // 当文本框离开焦点以后
32         emailInp.onblur = function () {
33             // 获取用户输入的邮箱地址
34             var email = this.value;
35             // 验证邮箱地址的正则表达式
36             var reg = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/;
37             // 如果用户输入的邮箱地址不符合规则
38             if (!reg.test(email)) {
39                 // 给出用户提示
40                 info.innerHTML = '请输入符合规则的邮箱地址';
41                 // 让提示信息显示为错误提示信息的样式
42                 info.className = 'bg-danger';
43                 // 阻止程序向下执行
44                 return;
45             }
46 
47             // 向服务器端发送请求
48             ajax({
49                 type: 'get',
50                 url: 'http://localhost:3000/verifyEmailAdress',
51                 data: {
52                     email: email
53                 },
54                 success: function (result) {
55                     console.log(result);
56                     info.innerHTML = result.message;
57                     info.className = 'bg-success';
58                 },
59                 error: function (result) {
60                     console.log(result)
61                     info.innerHTML = result.message;
62                     info.className = 'bg-danger';
63                 }
64             });
65 
66         }
67     </script>
68 </body>
69 </html>

服务端代码

 

 1 1 // 引入express框架
 2 2 const express = require('express');
 3 3 // 路径处理模块
 4 4 const path = require('path');
 5 // 创建web服务器
 6 const app = express();
 7 // 静态资源访问服务功能
 8 app.use(express.static(path.join(__dirname, 'public')));
 9 // 邮箱地址验证
10 app.get('/verifyEmailAdress', (req, res) => {
11     // 接收客户端传递过来的邮箱地址
12     const email = req.query.email;
13     // 判断邮箱地址注册过的情况
14     if (email == 'itheima@itcast.cn') {
15         // 设置http状态码并对客户端做出响应
16         res.status(400).send({message: '邮箱地址已经注册过了, 请更换其他邮箱地址'});
17     } else {
18         // 邮箱地址可用的情况
19         // 对客户端做出响应
20         res.send({message: '恭喜, 邮箱地址可用'});
21     } 
22 });

 

posted @ 2020-05-22 17:42  不忘初心l  阅读(225)  评论(0)    收藏  举报