其他分享
首页 > 其他分享> > 5.用户名唯一性校验

5.用户名唯一性校验

作者:互联网

分别创建用户名,邮箱,电话对应的后台文件

1.username.php

<?PHP
	$username=$_GET["username"];
	if($username=="gougou"){
		echo "username OK";
	}else{
		echo "username error";
	}
?>

2.email.php

	<?PHP
		$email=$_GET["email"];
		if($email=="1010@qq.com"){
			echo "email OK";
		}else{
			echo "email error";
		}
	?>

3.tel.php

<?PHP
		$tel=$_POST["tel"];
		/*校验电话码格式 */
			if($tel=="0000"){
				echo "tel OK";
			}else{
				echo "tel error";
			}
?>

2.创建前台表格

		<div class="box">
			用户名:<input type="text" name="username" id="username" value="" />
			<span class="show01">

			</span>
			<br><br>
			邮箱:<input type="email" name="email" id="email" value="" />
			<span class="show02">

			</span>
			<br><br>
			电话:<input type="tel" name="tel" id="tel" value="" />
			<span class="show03">

			</span>
		</div>

3.ajax获取后台数据

注意:使用onblur事件

是当form表单中的input输入框等元素失焦的情况下触发该事件。

		<script type="text/javascript">
			window.onload = function() {
				var username = document.getElementById('username');
				var show01 = document.getElementsByClassName('show01');
				var email = document.getElementById('email');
				var show02 = document.getElementsByClassName('show02');
				var tel = document.getElementById('tel');
				var show03 = document.getElementsByClassName('show03');
				// 用户名
				username.onblur = function() {
					// 前提.获取input值
					var uneValue = username.value;
					// console.log(uneValue);
					var xhr = null;
					if (window.XMLHttpRequest) {
						xhr = new XMLHttpRequest();
					} else {
						xhr = ActiveXObject("Microsoft.XMLHTTP");
					}
					xhr.open("get", "username.php?username=" + uneValue, true);
					xhr.send(null);
					xhr.onreadystatechange = function() {
						if (xhr.readyState == 4) {
							if (xhr.status == 200) {
								var result = xhr.responseText;
								// console.log(result);
								show01[0].innerText = result;
							}
						}
					}
				}
				// 邮箱
				email.onblur = function() {
					// 前提.获取input值
					var emaValue = email.value;
					// console.log(uneValue);
					var xhr = null;
					if (window.XMLHttpRequest) {
						xhr = new XMLHttpRequest();
					} else {
						xhr = ActiveXObject("Microsoft.XMLHTTP");
					}
					xhr.open("get", "email.php?email" + emaValue, true);
					xhr.send(null);
					xhr.onreadystatechange = function() {
						if (xhr.readyState == 4) {
							if (xhr.status == 200) {
								var result = xhr.responseText;
								// console.log(result);
								show02[0].innerText = result;
							}
						}
					}
				}
				// 电话
				tel.onblur = function() {
					var telValue = tel.value;
					var xhr = null;
					if (window.XMLHttpRequest) {
						xhr = new XMLHttpRequest();
					} else {
						xhr = ActiveXObject("Microsoft.XMLHTTP");
					}
					xhr.open("POST", "tel.php", true);
					var param = "tel=" + telValue;
					xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); //设置请求体信息,仅适用于post
					xhr.send(param);
					xhr.onreadystatechange=function(){
						if(xhr.readyState==4){
							if(xhr.status==200){
								var result=xhr.responseText;
								// console.log(result);
								show03[0].innerText=result;
							}
						}
					}
				}
			}
		</script>

结果

完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>用户名唯一性效验</title>
		<style type="text/css">
			* {
				margin: 0px;
				padding: 0px;
				list-style: none;
				text-decoration: none;
			}

			span {
				color: red;
			}
		</style>
		<script type="text/javascript">
			window.onload = function() {
				var username = document.getElementById('username');
				var show01 = document.getElementsByClassName('show01');
				var email = document.getElementById('email');
				var show02 = document.getElementsByClassName('show02');
				var tel = document.getElementById('tel');
				var show03 = document.getElementsByClassName('show03');
				// 用户名
				username.onblur = function() {
					// 前提.获取input值
					var uneValue = username.value;
					// console.log(uneValue);
					var xhr = null;
					if (window.XMLHttpRequest) {
						xhr = new XMLHttpRequest();
					} else {
						xhr = ActiveXObject("Microsoft.XMLHTTP");
					}
					xhr.open("get", "username.php?username=" + uneValue, true);
					xhr.send(null);
					xhr.onreadystatechange = function() {
						if (xhr.readyState == 4) {
							if (xhr.status == 200) {
								var result = xhr.responseText;
								// console.log(result);
								show01[0].innerText = result;
							}
						}
					}
				}
				// 邮箱
				email.onblur = function() {
					// 前提.获取input值
					var emaValue = email.value;
					// console.log(uneValue);
					var xhr = null;
					if (window.XMLHttpRequest) {
						xhr = new XMLHttpRequest();
					} else {
						xhr = ActiveXObject("Microsoft.XMLHTTP");
					}
					xhr.open("get", "email.php?email" + emaValue, true);
					xhr.send(null);
					xhr.onreadystatechange = function() {
						if (xhr.readyState == 4) {
							if (xhr.status == 200) {
								var result = xhr.responseText;
								// console.log(result);
								show02[0].innerText = result;
							}
						}
					}
				}
				// 电话
				tel.onblur = function() {
					var telValue = tel.value;
					var xhr = null;
					if (window.XMLHttpRequest) {
						xhr = new XMLHttpRequest();
					} else {
						xhr = ActiveXObject("Microsoft.XMLHTTP");
					}
					xhr.open("POST", "tel.php", true);
					var param = "tel=" + telValue;
					xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); //设置请求体信息,仅适用于post
					xhr.send(param);
					xhr.onreadystatechange=function(){
						if(xhr.readyState==4){
							if(xhr.status==200){
								var result=xhr.responseText;
								// console.log(result);
								show03[0].innerText=result;
							}
						}
					}
				}
			}
		</script>
	</head>
	<body>
		<div class="box">
			用户名:<input type="text" name="username" id="username" value="" />
			<span class="show01">

			</span>
			<br><br>
			邮箱:<input type="email" name="email" id="email" value="" />
			<span class="show02">

			</span>
			<br><br>
			电话:<input type="tel" name="tel" id="tel" value="" />
			<span class="show03">

			</span>
		</div>
	</body>
</html>

标签:function,用户名,tel,校验,xhr,唯一性,result,var,email
来源: https://www.cnblogs.com/mywifeisMsHu/p/15365806.html