AJAX实例-检测用户和注册

最新推荐文章于 2024-07-17 09:44:02 发布

weixin_46143669

最新推荐文章于 2024-07-17 09:44:02 发布

阅读量123

点赞数

分类专栏： JS学习笔记文章标签： javascript

本文链接：https://blog.csdn.net/weixin_46143669/article/details/107071960

版权

JS学习笔记专栏收录该内容

19 篇文章 0 订阅

订阅专栏

1.autocomplete属性
autocomplete 属性规定输入字段是否应该启用自动完成功能。

自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。

注意：autocomplete 属性适用于下面的类型：text、search、url、tel、email、password、datepickers、range 和 color。

<input autocomplete="on|off">//on为默认，可以只写autocomplete;off为关闭

2.javascript:void(0)
void 是 JavaScript 中非常重要的关键字，该操作符指定要计算一个表达式但是不返回值

<a href="javascript:void(0)">单击此处什么也不会发生</a> //用户链接时，void(0)计算为0，但javascript上没有任何效果
<a href="javascript:void(alert('Warning!!!'))">点我!</a> //点击后显示警告信息

href="#"与href="javascript:void(0)"的区别

#包含了一个位置信息，默认的锚是#top 也就是网页的上端，点击后会自动跳转到页面的最上方，且会整体刷新页面。
而javascript:void(0), 仅仅表示一个死链接，不会刷新页面。
在页面很长的时候会使用 # 来定位页面的具体位置，格式为：# + id。
如果你要定义一个死链接请使用 javascript:void(0) 。

<a href="javascript:void(0);">点我没有反应的!</a>
<a href="#pos">点我定位到指定位置!</a>
<br><br><br> <p id="pos">尾部定位点</p>

3.最终程序
HTML格式及事件脚本

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>register</title>
	<link rel="stylesheet" href="CSS/ys.css">
	<script src="js/abc.js"></script>
</head>
<body>
	<div class="register">
		<p class="title">
			<span>登 录</span>
			<span class="current">注 册</span>
		</p>
		<div class="form">
			<div >
				<span>+86</span>
				<input type="text" name="user" id="user" placeholder="请输入注册手机号" autocomplete="off"/>
				<i id="userico"></i>
				<p id="userinfo" class="info"></p>
			</div>
			<div >
				<input type="password" name="password" id="password" placeholder="请设置密码" />
				<i id="pwdico"></i>
				<p id="pwdinfo" class="info"></p>
			</div>
		</div>
		<p class="button">
			<a href="javascript:void(0)" id="login-btn" class="btn">登  录</a>
			<a href="javascript:void(0)" id="sigup-btn" class="btn show">注  册</a>
		</p>
	</div>
	<script>
		var user = document.getElementById('user'),
			psw = document.getElementById('password'),
			sigup = document.getElementById('sigup-btn'),
			userinfo = document.getElementById('userinfo'),
			userico = document.getElementById('userico'),
			pwdico = document.getElementById('pwdico'),
			pwdinfo = document.getElementById('pwdinfo'),
			title = document.querySelector(".title"),
			login = document.getElementById("login-btn"),
			btns = document.querySelectorAll(".btn"),
			userReg = /^1[3578]\d{9}$/,
			pwdReg = /^\w{5,12}$/i,
			isRepeat = false;//记录用户名是否被占用
		//检测用户
		function checkUser(){
			var userVal = user.value;
			//验证手机号是否有效，可封装成单独的函数
			if(!userReg.test(userVal)){
				userinfo.innerHTML = "手机号码无效";
				userico.className = 'no';
			}else{
				userinfo.innerHTML = "";
				userico.className = '';
				//发起请求，检测是否重复注册
				$.ajax({
					url:"http://localhost/ajax/jjjj/server/isUserRepeat.php",
					// method:'post',
					data:{
						username:userVal
					},
					success:function(data){		
						// console.log(data);
						if(data.code == 1){
							userico.className = 'ok';
						}else if(data.code == 0){
							userico.className = 'no';
							userinfo.innerHTML = data.msg;
							isRepeat = true;
						}else{
							userinfo.innerHTML = '检测失败';
						}
					}
				});
				//发起请求，用户名是否已注册可登录
				// $.ajax({
				// 	url:"http://localhost/ajax/jjjj/server/user.json",
				// 	// method:'post',
				// 	data:{
				// 		username:userVal
				// 	},
				// 	success:function(data){		
				// 		var num = 0;
				// 		for(var i=0;i<data.length;i++){
				// 			if(data[i].username === userVal){
				// 				userico.className = 'ok';
				// 			num = 1;
				// 			}
				// 		}
				// 		if(!num){
				// 			userico.className = 'no';
				// 			userinfo.innerHTML = "用户名未注册";
				// 		}
				// 	}
				// });
			}
		}
		//检测密码
		function checkPwd(){
			var pwdVal = psw.value;
			if(!pwdReg.test(pwdVal)){
				pwdico.className = 'no';
				pwdinfo.innerHTML = '密码格式错误'; 
			}else{
				pwdico.className = 'ok';
				pwdinfo.innerHTML = ''; 
			}
		}
		function Register(){
			var user_val = user.value,
				pwd_val = psw.value;
			//如果手机号有效且没有被占用同时密码合法，才可以注册
			if(userReg.test(user_val) && pwdReg.test(pwd_val) && !isRepeat){
				//发起请求，实现注册
				$.ajax({
					url:"http://localhost/ajax/jjjj/server/register.php",
					method:"post",//为保密，所以用post
					data:{//键名根据PHP文件规定来写
						username:user_val,
						userpwd:pwd_val
					},
					success:function(data){
						//清空文本框
						user.value = "";
						psw.value = "";
						alert("注册成功");
						//载入登录界面，登录高亮显示
						title.children[0].className = "current";
						title.children[1].className = "";
						login.className = "btn show";
						sigup.className = "btn";
					},
					error:function(){
						pwdinfo.innerHTML = "注册失败"; 
					}
				})
			}
		}
		function change(){
			//此处要求html结构里，按钮顺序与标题顺序一致
			for(var i=0;i<title.children.length;i++){
				title.children[i].className = "";
				title.children[i].id = i;
			}
			event.target.className = "current";
			for(var i=0;i<btns.length;i++){
				btns[i].className = "";
			}
			btns[event.target.id].className = "show";
		}

		//绑定事件检测用户有效性及是否重复注册
		user.addEventListener('blur',checkUser,false);
		//绑定事件检测密码有效性
		psw.addEventListener('blur',checkPwd,false);
		//绑定事件进行注册
		sigup.addEventListener('click',Register,false);
		//点击登录、注册进行切换
		//如果要在登录和注册界面实现不同的检测功能，需要将给user绑定的事件分成两个函数，一个用于检测是否重复注册（1），一个用于检测是否已注册可登录（2）
		//默认注册页面，绑定1程序；当点击登录、注册进行切换时，就改变绑定的函数（在change中重新绑定）
		title.addEventListener('click',change,false);//事件委托，配合event.target使用
	</script>
</body>
</html>

AJAX封装

var $ = {
	ajax:function(options){//模仿JQUERY进行封装
		var xhr = null,
			url = options.url,//url是必需参数，不能为空
			method = options.method || "get",//传输方式，默认为get
			async = typeof(options.async) === "undefined"?true:options.async,
			//如果写成 options.async || true ,如果参数内定义为false,由于或选择符的性质
			//只会永远为true
			data = options.data || null,//参数
			params = '',
			callback = options.success,//AJAX请求成功的回调函数
			error = options.error;
			//将data的对象字面量的形式转换为字符串形式，以使为get时参数依然可以用data:{...}方式进行传输
		if(data){
			for(var i in data){
				params += i + "=" + data[i] +"&";
			}
			params = params.replace(/&$/,"");//去掉末尾的&
			
		}	
		//根据method的值改变url
		if(method === "get"){
			url += "?" + params;
			
		}
		if(typeof XMLHttpRequest != "undefined"){
			xhr = new XMLHttpRequest();
		}else if(typeof ActiveXObject != "undefined"){
			var xhrArr = ['Microsoft.XMLHTTP','MSXML2.XMLHTTP.6.0','MSXML2.XMLHTTP.5.0','MSXML2.XMLHTTP.4.0','MSXML2.XMLHTTP.3.0','MSXML2.XMLHTTP.2.0'];
			var len = xhrArr.length;
			for(var i = 0;i<len;i++){
				try{
					xhr = new ActiveXObject(xhrArr[i]);
					break;
				}
				catch(ex){

				}
			}
		}else{
			throw new Error('No XHR object availabel.')
		}
		xhr.onreadystatechange = function(){
			if(xhr.readyState == 4){
				if((xhr.status >=200 && xhr.status<300) || xhr.status ===304){
					callback && callback(JSON.parse(xhr.responseText));
					// console.log(xhr.responseText);
				}else{
					error && error();
				}
			}
		}
		
		xhr.open(method,url,async);
		xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
		xhr.send(params);
	},
	jsonp:function(){}
};

CSS文件

*{
	padding: 0;
	margin:0;
	text-decoration: none;
}

body{
	background-color: #333;
}

.register{
	width: 300px;
	height: 270px;
	margin:80px auto;
	padding: 15px 30px;
	background-color: #eee;
	border-radius: 5px;
}

.register .title{
	height: 35px;
}

.register .title span{
	font-size: 16px;
	font-weight: bold;
	color: #666;
	margin-right: 30px;
	cursor: pointer;
}

.register .title .current{
	color: #f00;
}


.register .form div{
	width: 290px;
	height: 30px;
	border-radius: 8px;
	background-color: #fff;
	margin-bottom: 25px;
	padding: 8px 10px;
	position: relative;
}

.register .form div span{
	display: inline-block;
	padding-top: 8px;
	padding-right: 3px;
	color: #666;
}

.register .form div input{
	border: none;
	outline: none;/*消除外边框，选中时也没有边框*/
	font-size: 17px;
	color: #666;
	background: none;
}

.register .form div i{
	position: absolute;
	width: 16px;
	height: 16px;
	right: 12px;
	top: 14px;
}

.register .form div .ok{
	background:url(../img/icon.png) no-repeat 0 -67px;
	/*以左上角作为原点（0,0），x y值为正时，图片整体向右向下移动；为负值时，向左向上移动*/
}

.register .form div .no{
	background:url(../img/icon.png) no-repeat -17px -67px;
}

.register .form div .info{
	margin-top: 13px;
	color: #f00;
	padding-left: 2px;
}

.register .button{
	padding-top: 7px;
}

.register .button a{
	display: none;
	width: 100%;
	height: 45px;
	line-height: 45px;
	text-align: center;
	background: #f20d0d;
	color: #fff;
	border-radius: 30px;
	font-size: 16px;
}
.register .button a.show{
	display: block;
}