- 获取文本框并为其添加离开焦点事件
- 离开焦点时,检测用户输入的邮箱地址是否符合规则
- 如果不符合规则,阻止程序向下执行并给出提示信息
- 向服务器端发送,检验邮箱地址是否被别人注册
- 根据服务器返回值决定客户端显示何种提示信息
创建服务器
// 引入express框架
const express = require('express');
// 路径处理模块
const path = require('path');
const bodyParer = require('body-parser');
// 创建web服务器
const app = express();
// 静态资源访问服务功能
app.use(express.static(path.join(__dirname, 'public')));
app.get('/verifyEmailAdress', (req, res) => {
var email = req.query.email;
console.log(email);
if (email == "itheima@itcast.cn") {
res.status(400).send({ message: "邮箱地址已经注册过了,请更换邮箱地址" });
console.log(message);
} else {
res.send({ message: "恭喜,邮箱地址可用" });
}
});
// 监听端口
app.listen(3000);
// 控制台提示输出
console.log('服务器启动成功');
ajax.js封装文件,就是上一篇写的
function ajax(options) {
// 存储默认值
var defaults = {
type: 'get',
url: '',
async: true,
data: {},
header: {
'Content-Type': 'application/x-www-form-urlencoded'
},
success: function() {},
error: function() {}
};
// 使用defaults对象中的属性覆盖defaults对象中的属性
Object.assign(defaults, options);
// 创建ajax对象
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;
}
// console.log(params);
// 配置ajax对象 因为不确定 函数传参传递
xhr.open(defaults.type, defaults.url);
// 如果请求方式post
if (defaults.type == 'post') {
var contentType = defaults.header['Content-Type'];
// 设置请求参数格式要求
xhr.setRequestHeader('Content-Type', contentType);
// 判断用户希望的请求参数格式
// 如果类型为json
if (contentType == 'application/json') {
// 向服务器端传递json数据格式参数
xhr.send(JSON.stringify(defaults.data));
} else {
// 向服务器端传递普通类型的参数
xhr.send(params);
}
} else {
xhr.send();
}
// 监听xhr对象下面的onload事件
// 当xhr对象接收完响应数据后触发
xhr.onload = function() {
// 获取响应头中的数据
// console.log(xhr.getResponseHeader('Content-Type'));
var contentType = xhr.getResponseHeader('Content-Type');
// 服务器端返回的数据
var responseText = xhr.responseText;
// 响应类型
if (contentType.includes('application/json')) {
// console.log('包含');
responseText = JSON.parse(responseText);
}
// console.log();
// http状态码判断(为200的时候 请求成功调用成功情况的函数)
if (xhr.status == 200) {
defaults.success(responseText, xhr);
} else {
// 请求失败
defaults.error(responseText, xhr);
// console.log(xhr);
}
}
}
html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css">
<style>
p:not(:empty) {
padding: 15px;
}
.container {
padding-top: 100px;
}
</style>
</head>
<body>
<div class="container">
<div class="form-group">
<label for=""> 邮箱地址</label>
<input type="email" class="form-control" placeholder="请输入邮箱地址" id="email">
</div>
<!-- 错误bg-danger 正确bg-success -->
<p id="info"></p>
</div>
<script src="/js/ajax.js"></script>
<script>
// 获取页面元素、
var emailInp = document.getElementById('email');
var info = document.getElementById('info');
// 当文本框离开焦点
emailInp.onblur = function() {
// 获取用户输入的邮箱地址
var email = this.value;
// 验证邮箱地址的正则表达式
var reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
// 判断邮箱地址是否规则
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) {
console.log(result.message);
info.innerHTML = result.message;
info.className = 'bg-success';
},
error: function(result) {
console.log(result.message);
info.innerHTML = result.message;
info.className = 'bg-danger';
}
});
}
</script>
</body>
</html>
;;;;;
- 这里面我用bootstrap框架,但是我在使用路径时出错了,ajax.js文件可以引进去,但是bootstrap就是不行,我后面再看看吧,还好我晓得网页链接:
https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css
- 还有就是服务器启动了,有时候重启一下服务器;(有时候不是代码错误,网页刷新也没用,就重启下);
省市区:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>搜索框输入文字自动提示</title>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css">
<style type="text/css">
.container {
padding-top: 150px;
}
</style>
</head>
<!--
1.通过接口获取省份信息
2.使用javascript获取到省市区下拉框元素
3.将服务器端返回的省份信息显示在下拉框中
4.为下拉框元素添加表单值改变事件(onchange)
5.当用户选择省份时,根据省份id获取城市信息
6.当用户选择城市时,根据城市id获取县城信息
-->
<body>
<div class="container">
<div class="form-inline">
<div class="form-group">
<select class="form-control" id="province">
<option>请选择省份</option>
</select>
</div>
<div class="form-group">
<select class="form-control" id="city">
<option>请选择城市</option>
</select>
</div>
<div class="form-group">
<select class="form-control" id="area">
<option>请选择县城</option>
</select>
</div>
</div>
</div>
<script src="/js/ajax.js"></script>
<script src="/js/template-web.js"></script>
<!-- 省份模板 【模板id不要和遍历的数据对象同名】-->
<script type="text/html" id="provinceTpl">
<option>请选择省份</option>
{{each province}}
<!-- $value是 循环中的每一项 -->
<option value="{{$value.id}}">{{$value.name}}</option>
{{/each}}
</script>
<!-- 城市模板 -->
<script type="text/html" id="cityTpl">
<option>请选择城市</option>
{{each city}}
<option value="{{$value.id}}">{{$value.name}}</option>
{{/each}}
</script>
<!-- 县城模板 -->
<script type="text/html" id="areaTpl">
<option>请选择县城</option>
{{each area}}
<option value="{{$value.id}}">{{$value.name}}</option>
{{/each}}
</script>
<script>
// 获取省市区下拉框元素
var province = document.getElementById('province');
var city = document.getElementById('city');
var area = document.getElementById('area');
// 获取省份信息
ajax({
type: 'get',
url: 'http://localhost:3000/province',
success: function(data) {
// 将服务器端返回的数据和html进行拼接
var html = template('provinceTpl', {
province: data
});
province.innerHTML = html; // 将拼接好的html字符串显示在页面中
}
});
// 为省份的下拉框添加值改变事件
province.onchange = function() {
var pid = this.value; // 获取省份id
// 清空县城下拉框中的数据
var html = template('areaTpl', {
area: []
});
area.innerHTML = html;
// 根据省份id获取城市信息
ajax({
type: 'get',
url: '/cities',
data: {
id: pid
},
success: function(data) {
var html = template('cityTpl', {
city: data
});
city.innerHTML = html;
}
})
};
// 当用户选择城市的时候
city.onchange = function() {
var cid = this.value; // 获取城市id
// 根据城市id获取县城信息
ajax({
type: 'get',
url: 'http://localhost:3000/areas',
data: {
id: cid
},
success: function(data) {
var html = template('areaTpl', {
area: data
});
area.innerHTML = html;
}
})
}
</script>
</body>
</html>
搜索框内容自动提示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>搜索框内容自动提示</title>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css">
<style type="text/css">
.container {
padding-top: 150px;
}
.list-group {
display: none;
}
</style>
</head>
<!-- 1.获取搜索框并为其添加用户输入事件
2.获取用户输入关键字
3.向服务器端发送请求并携带关键字作为请求参数
4.将响应数据显示在搜索框底部-->
<body>
<div class="container">
<div class="form-group">
<input type="text" class="form-control" placeholder="请输入搜索关键字" id="search">
<ul class="list-group" id="list-box">
</ul>
</div>
</div>
<!-- script -->
<script src="/js/ajax.js"></script>
<script src="/js/template-web.js"></script>
<script type="text/html" id="tpl">
{{each result}}
<li class=list-group-item>{{$value}}</li>
{{/each}}
</script>
<script type="text/javascript">
//获取搜索框 searchInp
var searchInp = document.getElementById('search');
//获取提示文字的存放文字 listBox
var listBox = document.getElementById('list-box');
//存储定时器的变量
var timer = null;
//当用户在文本框中输入的时候触发 s.οninput=function()
searchInp.oninput = function() {
//清除上一次开启的定时器
clearTimeout(timer);
//获取用户输入的内容 key =this.value(s.value)
var key = this.value;
//如果用户没有再搜索框中输入内容
if (key.trim().length == 0) {
//将提示下拉框隐藏掉
listBox.style.display = "none";
//阻止程序向下执行
return;
}
timer = setTimeout(function() {
//向服务器端发送请求
//向服务器端索取和用户输入关键字相关的内容
ajax({
type: 'get',
url: 'http://localhost:3000/searchAutoPrompt',
data: {
key: key
},
success: function(result) {
//console.log(result);
//使用模板引擎拼接字符串
var html1 = template("tpl", {
result: result
})
//将拼接好的字符串显示在页面中
listBox.innerHTML = html1;
//显示ul容器
listBox.style.display = "block";
}
})
}, 800)
}
</script>
</body>
</html>
看到一篇一样学习历程的博主:Zmongo;比我写的详细