这是login.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ajax验证手机号</title>
</head>
<body>
<ul>
<li>用户名<input type="text" name="userName" ><span></span></li>
<li>密码<input type="password" name="password" ><span></span></li>
<button>登陆</button>
</ul>
<script>
var user = document.getElementsByName('userName')[0]
var password = document.getElementsByName('password')[0]
var btn = document.getElementsByTagName('button')[0]
// 第一步：给用户名添加blur事件，当鼠标离开用户名时候触发
user.onblur = function () {
// 1.创建ajax对象
var xhr = new XMLHttpRequest()
// 2.监听ajax对象响应事件
xhr.onreadystatechange = function () {
//响应成功
if (xhr.readyState == 4) {
user.nextSibling.innerHTML = this.responseText
}
}
// 3.初始化ajax请求
// 创建查询参数，验证用户名
var data = '?userName='+user.value
xhr.open('get','check.php'+data, true)
// 4.发送请求
xhr.send(null)
}
// 第二步：给密码框添加blur事件，当鼠标离开密码框时候触发
password.onblur = function () {
// 1.创建ajax对象
var xhr = new XMLHttpRequest()
// 2.监听ajax事件
xhr.onreadystatechange = function () {
if (xhr.readyState == 4){
password.nextSibling.innerHTML = this.responseText
}
}
// 3.初始化ajax请求
var data = '?password'+password.value
xhr.open('get','check.php'+data,true)
// 4.发送请求
xhr.send(null)
}
// 登陆按钮
btn.onclick = function () {
alert('恭喜登陆成功')
}
</script>
</body>
</html>这是check.php文件，包含了返回的text
<?php /** * Created by PhpStorm. * User: 葛浮东 * Date: 2017/12/20 * Time: 0:22 */ $userName = isset($_GET['userName']) ? $_GET['userName']:null; $userList=['123','456','789']; if($userName !== null){ if(in_array($userName,$userList)){ echo '用户名重复'; }else{ echo '用户名可用'; } } $password = isset($_GET['password']) ? $_GET['password']:null; if ($password!==null){ if(strlen($password)>=6){ echo '密码复合要求'; }else{ echo '密码不符合要求'; } } ?>
