ajax 邮箱地址格式与唯一性验证小案例

最新推荐文章于 2023-06-08 19:50:00 发布

惜丶

最新推荐文章于 2023-06-08 19:50:00 发布

阅读量642

点赞数

文章标签： ajax node.js

本文链接：https://blog.csdn.net/weixin_42321619/article/details/108127292

版权

1.主界面


		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<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" class="form-control" placeholder="请输入邮箱地址" id="email">
			</div>
			<!-- 错误 bg-danger 正确 bg-success -->
			<p id="info"></p>
		</div>

2.邮箱格式验证并返回相对于提醒样式

<script>
			var emailInp = document.getElementById('email');
			var info = document.getElementById('info');

			emailInp.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://127.0.0.1:3000/test',
					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>

3.服务器创建与响应

var express = require('express');
var path = require('path')
var app = express();

app.use(express.static(path.join(__dirname, 'public')));

app.get('/test', (req, res) => {
	var email = req.query.email;
	if (email == 'qwe@qwe.com') {
		res.status(400).send({
			message: '该邮箱已被注册，请更换！'
		})
	} else {
		res.send({
			message: '邮箱正确！'
		})
	}
})

app.listen(3000, function(err) {
	if (err) throw err;
	console.log('success');
})

一个小案例。上完整代码。

//index.html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<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" 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 = /^[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://127.0.0.1:3000/test',
					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>

//ajax.js  封装的ajax
function ajax(options) {
	var defaults = {
		type: 'get',
		url: '',
		async: true,
		data: {},
		header: {
			'Content-Type': 'application/x-www-form-urlencoded'
		},
		success: function() {},
		error: function() {},
	}
	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 += "?" + params;
		xhr.open(defaults.type, defaults.url);
		xhr.send();
	}

	if (defaults.type == 'post') {
		xhr.open(defaults.type, defaults.url);
		xhr.setRequestHeader('Content-Type', defaults.header['Content-Type']);
		if (defaults.header['Content-Type' == 'application/json']) {
			xhe.send(JSON.stringify(defaults.data))
		} else {
			xhr.send(params)
		}
	}

	xhr.onload = function() {
		var contentType = xhr.getResponseHeader('content-Type');
		var responseText = xhr.responseText;
		if (contentType.includes('application/json')) {
			responseText = JSON.parse(responseText);
		}
		if (xhr.status == 200) {
			defaults.success(responseText, xhr);
		} else {
			defaults.error(responseText, xhr);
		}
	}

	xhr.onerror = function() {
		defaults.error(xhr);
	}

}

//app.js
var express = require('express');
var path = require('path')
var app = express();

app.use(express.static(path.join(__dirname, 'public')));

app.get('/test', (req, res) => {
	var email = req.query.email;
	if (email == 'qwe@qwe.com') {
		res.status(400).send({
			message: '该邮箱已被注册，请更换！'
		})
	} else {
		res.send({
			message: '邮箱正确！'
		})
	}
})

app.listen(3000, function(err) {
	if (err) throw err;
	console.log('success');
})