Ajax异步实战:表单验证
代码如下:
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajax异步实战:表单验证</title>
</head>
<body>
<h3>用户登录</h3>
<form name="login" method="post" onsubmit="return false">
<p>
<label for="email">邮箱:</label>
<input type="email" id="email" name="email" placeholder="example@gmail.com">
<span style="color: red" id="error_email">*</span>
</p>
<p>
<label for="password">密码: </label>
<input type="password" id="password" name="password" placeholder="不少于6位">
<span style="color: red" id="error_psw">*</span>
</p>
<p>
<button id="submit" type="button">提交</button>
<span id="result"></span>
</p>
</form>
<script>
//获取到相关的元素,以及提示信息占位符
//获取到form表单login
var login = document.forms.namedItem('login');
//获取到提交按钮
var submit = document.getElementById('submit');
//获取到邮箱提示信息占位符
var error_email = document.getElementById('error_email');
//获取到密码提示信息占位符
var erroe_psw = document.getElementById('error_psw');
//提交按钮验证提示信息
var result = document.getElementById('result');
//未提交按钮设置点击事件,并且分配一个事件响应函数
submit.addEventListener('click',checkUser,false);
// 主函数: 定义提交事件函数, 内部会调用二个子函数,完成主要功能
function checkUser() {
//1.表单数据非空验证
var user = isEmpty(login, error_email, error_psw);
// 2. Ajax异步验证
// 如果非空验证返回false,说明验证失败, 就不必再到服务器进行Ajax验证了, 直接返回false
// 否则就将需要验证的数据(对象字面量user)做为参数,调用异步验证器: verfiy()
return user ? verfiy(user, result) : false;
}
/*****************************************************************/
// 非空验证函数
//参数@form form表单 , @ error1 表单的邮箱 , @ error2 密码
function isEmpty(form, error1, error2) {
// 获取表单控件中的内容,并清空前后空格
var email = form.email.value.trim();
var password = form.password.value.trim();
//先验证邮箱,再验证密码,并且正确设置焦点与返回值
if (email.length === 0){
error1.innerText = '邮箱不能为空';
login.email.focus();
return false;
}else if (password.length === 0){
error2.innerText = '邮箱不能为空';
login.password.focus();
return false;
}
// 非空验证通过, 则返回邮箱与密码组成的对象字面量,方便后续代码调用
return {
email: email,
password: password
}
}
//*********************************************
function verfiy(user, result) {
//1.创建request对象
var request = new XMLHttpRequest();
//2.监听响应状态
request.onreadystatechange = function(){
if (request.readyState === 4) { // 准备就绪
// console.log(request.responseText);
// 设置验证提示
// result.innerHTML = request.responseText;
// 验证通过的跳转功能, 需要使用JSON来实现
if (request.status === 200){
//请求成员,更新页面中的DOM元素
console.log(request.responseText);
result.innerHTML = request.responseText;
}
}
return false;
};
//3.设置请求参数
request.open('post','admin/check.php',true);
//4. 设置头信息,将内容类型设置为表单提交方式(固定模板语法结构)
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
//4.发送请求
// 准备要提交的数据
var data = 'email=' + user.email + '&password=' + user.password;
request.send(data);
}
//***********************************
// input: 当用户修改错误数据时, 提示信息应该消失
login.email.addEventListener('input', function (){
error_email.innerText = ''; // 清除邮箱错误提示
result.innerText = ''; // 清除服务器返回的验证提示
}, false);
login.password.addEventListener('input', function (){
error_psw.innerText = ''; // 清除密码错误提示
result.innerText = ''; // 清除服务器返回的验证提示
}, false);
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例