实例
<!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>传统表单验证</title> <!--涉及到用户名密码用post提交--> </head> <body> <h3>用户登录</h3> <form action="admin/check.php" method='post'> <label for="email">邮箱:<input type="email" name="email"></input></label><br/> <label for="password">密码:<input type="password" name="password"></input></label><br/> <button>登录</button> </form> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
涉及用户信息，用POST方法提交，表单填好后，整体提交验证，填写是否有问题，点击提交按钮后才知道。
实例
<!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>ajax验证</title>
</head>
<body>
<h3>用户登录</h3>
<form action="admin/check01.php" method='post'>
<label for="email">邮箱:</label>
<input type="email" name="email" onblur="ch()" oninput="sr()"></input><br/>
<label for="password">密码:</label>
<input type="password" name="password" onblur="ch()" oninput="sr()"></input><br/>
<button>登录</button>
<span id="tips" style="color:red"></span>
</form>
<script>
var form=document.getElementsByTagName("form")[0];
var tips=document.getElementById("tips");
var email=document.getElementsByName("email")[0];
var password=document.getElementsByName("password")[0];
function ch(){
//1. 创建ajax请求对象
var request = new XMLHttpRequest();
//2. 请求成功的回调处理
request.onreadystatechange = function () {
// 当请求完成(4)并成功的获取到了数据(200)
if (this.readyState === 4 && this.status === 200) {
// 更新提示信息
tips.innerHTML = this.responseText;
}
}
//3. 设置请求参数
request.open('POST', 'admin/check01.php', true);
//4. POST请求需要设置请求头信息
request.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
//5. 发送请求
request.send('email=' + email.value + '&password=' + password.value);
}
// 用户修改信息时,清空提示信息
function sr() {
tips.innerHTML = '';
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
Ajax异步提交，填写邮箱后即刻验证，若非现有用户，则提示新用户注册。
