验证邮箱地址唯一性

注:未贴出服务器端代码,只贴出前端界面代码,Ajax封装代码见前两天的博客代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<style type="text/css">
p:not(:empty){
padding:15px;
}
.container{
padding-top: 100px;
}
</style>
</head>
<body>
<div class="container">
<div class="form-group">
<label>邮箱地址</label>
<input type="email" id="email" class="form-control" placeholder="请输入邮箱地址">
</div>
<!-- 错误 bg-danger 正确 bg-success -->
<p id="info"></p>
</div>


<script src="./Ajax封装完成函数.js"></script>
<script>
// 获取页面中的元素
var email = document.getElementById('email');
var info = document.getElementById('info');
//验证邮箱地址的正则表达式
var reg =/^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/;
// 当文本框离开焦点以后
email.onblur = function(){
var email = this.value;
// 如果用户输入的邮箱地址不符合规则
if(!reg.test(email)){
// 给出用户提示
info.innerHTML = '请输入符合规则的邮箱地址';
//让提示信息显示为错误提示信息的样式
info.className = 'bg-danger';
// 阻止程序向下执行
return;
}
ajax({
url: 'http://localhost/check',
data:{
email:email
},
success:function(result){
console.log(result);
info.innerHTML = result.message;
info.className = 'bg-success';
},
error:function(result){
console.log(result);
info.innerHTML = result.message;
info.className = 'bg-danger';
}
});
}

</script>
</body>
</html>

省市区三级联动

注:

1.以下代码我把key值省略了,如需使用到网站申请即可。
2.Ajax封装的函数见我第三天写的博客,链接在这(https://blog.csdn.net/qq_43709292/article/details/104137293)。
3.最开始怎么试都不行,发现有一个跨域的问题需要解决,解决参照这篇博文(https://blog.csdn.net/dadadashixiong/article/details/79978988),可能我是本地的环境,要访问那个api才出现的问题。

接口选择腾讯位置服务的接口,见链接(https://lbs.qq.com/webservice_v1/guide-region.html),这是本人第一次学习接口的使用,如果有错误的地方,欢迎指出!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<style type="text/css">
.container {
padding-top: 150px;
}
</style>
</head>

<body>
<div class="container">
<div class="form-inline">
<div class="form-group">
<select class="form-control" id="province">
</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="./Ajax封装完成函数.js"></script>
<script src="./template-web.js"></script>
<!-- 准备好省份模板 -->
<script type="text/html" id="provinceTpl">
<option>请选择省份</option>
<!-- 循环数据 把数据拼接到html代码中 -->
{{each province}}
<option value="{{$value.id}}">{{$value.name}}</option>
{{/each}}
</script>
<!-- 准备好城市模板 -->
<script type="text/html" id="cityTpl">
<option>请选择城市</option>
<!-- 循环数据 把数据拼接到html代码中 -->
{{each city}}
<option value={{$value.id}}>{{$value.name}}</option>
{{/each}}
</script>
<!-- 准备好县城模板 -->
<script type="text/html" id="areaTpl">
<option>请选择县城</option>
<!-- 循环数据 把数据拼接到html代码中 -->
{{each area}}
<option value={{$value.id}}>{{$value.fullname}}</option>
{{/each}}
</script>
<script>
// 获取省市区下拉框元素
var province = document.getElementById('province');
var city = document.getElementById('city');
var area = document.getElementById('area');
// 获取省份信息
ajax({
type: 'get',
url: 'https://apis.map.qq.com/ws/district/v1/list',
data: {
key: '这里填写从接口处获得的key值'
},
success: function (data) {
//将模板与数据进行拼接
var html = template('provinceTpl', { province: data.result[0] });
//将拼接好的html字符串添加到页面中
province.innerHTML = html;
},
error: function (data) {
console.log(data.message);
}
});
//对省份添加发生改变事件
province.onchange = function () {
//获取省份id 用此id来查找此省份下的县城
var pid = this.value;
//清空县城下拉框中的数据
var html = template('areaTpl', { area: [] });
area.innerHTML = html;
//清空城市下拉框中的数据
var html = template('cityTpl', { city: [] });
city.innerHTML = html;
//获取城市信息
ajax({
type: 'get',
url: 'https://apis.map.qq.com/ws/district/v1/getchildren',
data: {
key: '这里填写从接口处获得的key值',
id: pid
},
success: function (data) {
//将模板与数据进行拼接
var html = template('cityTpl', { city: data.result[0] });
//将拼接好的html字符串添加到页面中
city.innerHTML = html;
},
error: function (data) {
console.log(data.message);
}
});
}
//对城市添加发生改变事件
city.onchange = function () {
//获取城市id
var pid = this.value;
//清空县城下拉框中的数据
var html = template('areaTpl', { area: [] });
area.innerHTML = html;
//获取县城信息
ajax({
type: 'get',
url: 'https://apis.map.qq.com/ws/district/v1/getchildren',
data: {
key: '这里填写从接口处获得的key值',
id: pid
},
success: function (data) {
//将模板与数据进行拼接
var html = template('areaTpl', { area: data.result[0] });
//将拼接好的html字符串添加到页面中
area.innerHTML = html;
},
error: function (data) {
console.log(data.message);
}
});
}
</script>
</body>

</html>

在写这个代码的时候,有几个地方值得注意一下,一是那个$value 代表的是循环过程中的当前项,要注意;二是省份 城市 县城的模板要循环对应的数据,见上方代码,注意写的格式即可。大致思路我总结一下:

  1. 获取三个下拉框的元素;
  2. 通过list接口获取省份信息,通过模板引擎将省份信息拼接到下拉框中;
  3. 对省份下拉框添加 onchange 事件,并且每一次省份改变后,清空城市和县城的下拉框,之后通过 getchildren 接口通过用省份的 id 获取对应城市,并用模板引擎添加到页面中;
  4. 对城市下拉框添加 onchange 事件,并且每一次城市改变后,清空县城下拉框,之后通过 getchildren 接口用城市 id 获取对应的乡镇,并用模板引擎添加到页面中。

使用JSONP实现腾讯天气

注:本次案例实现较为简单,这里捋一下大致思路:

  1. 到腾讯天气网站,按F12切换到Network,找到common开头的一次请求,点击查看需要传递的参数,见下图

    source:代表以何种方式访问 填 PC / WX
    weather_type:代表天气 forecast_1h 表示未来48小时 forecast_24h 表示未来7天
    province:表示省份
    city:表示城市
    1. 调用封装好的jsonp函数,填入相关信息,此时就可以得到服务器端返回的相关内容
    2. 用模板引擎(这里使用的是art-template)拼接到页面上即可

个人比较容易出错的有几个地方就是:

  1. template.defaults.imports.dataFormat = dataFormat;在格式化时间的时候,要在模板中使用自定义的函数,此时要将函数名暴露出来,不能直接调用函数;

  2. . 后面不能跟变量,变量应该放到 [ ] 中

    代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<div class="container">
<table class="table table-striped table-hover" align="center" id="box">
</table>
</div>
<script src="./JSONP封装完成函数.js"></script>
<script src="./template-web.js"></script>
<!-- 模板 -->
<script type="text/html" id="tpl">
<tr>
<th>时间</th>
<th>温度</th>
<th>天气</th>
<th>风向</th>
<th>风力</th>
</tr>
{{each data}}
<tr>
<td>{{dataFormat($value.update_time)}}</td>
<td>{{$value.degree}}</td>
<td>{{$value.weather}}</td>
<td>{{$value.wind_direction}}</td>
<td>{{$value.wind_power}}</td>
</tr>
{{/each}}
</script>
<script>
// 获取box标签 用来显示模板数据的地方s
var box = document.getElementById('box');
// node的语法规则 将dataFormat暴露出来使模板中的数据可以调用此方法
// 第一个dataFormat表示追加的属性,模板中可以使用的属性
// 第二个dataFormat表示函数名,调用此函数方法
template.defaults.imports.dataFormat = dataFormat;
// 将返回的时间数据进行格式化
function dataFormat(data){
var year = data.substr(0,4);
var month = data.substr(4,2);
var day = data.substr(6,2);
var hour = data.substr(8,2);
var min = data.substr(10,2);
var sec = data.substr(12,2);
return year + '年' + month + '月' + day + '日' + ' ' + hour + ':' + min + ':' + sec;
}
//调用jsonp方法
jsonp({
url:'https://wis.qq.com/weather/common',
data:{
source:'pc',
weather_type:'forecast_1h',
province: '浙江省',
city: '丽水市'
},
success:function(data){
// 将模板与数据进行拼接
var html = template('tpl',{data:data.data.forecast_1h});
// 将拼接好的html显示在页面上
box.innerHTML = html;
}
});
</script>
</body>
</html>

JSONP封装的js文件如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function jsonp(options) {
//动态添加script标签 使发送请求这一动作变得可控,否则页面一上来就会被加载
var script = document.createElement('script');
//拼接字符串的变量
var params = '';
//遍历拿到数据
for (attr in options.data) {
params += '&' + attr + '=' + options.data[attr];
}
//函数名随机 否则如果有两个按钮同时点击响应同一个函数的话,后面函数返回结果会覆盖前面函数的返回结果
var attrName = 'script' + Math.random().toString().replace('.', '');
//它已经不是一个全局函数了
///我们要想办法让它重新变为全局函数 .后面不能是个变量哦!
window[attrName] = options.success;
//设置script标签的src属性
script.src = options.url + '?callback=' + attrName + params;
//动态添加script标签
document.body.appendChild(script);
//为script标签添加onload事件 此事件是页面全部加载完毕后才触发
script.onload = function () {
//页面加载完毕后移除script标签,因为执行完毕后此标签已没有意义
document.body.removeChild(script);
}
}