一 验证表单数据
html和css代码是在后面的统一发
我把整个验证过程分成了三部分
获取必要的元素(ID和表单)
var login = document.forms.namedItem('login');
var submit = document.getElementById('submit');
var error_email = document.getElementById('error_email');
var error_psw = document.getElementById('error_psw');
var result = document.getElementById('result');
---------------------------------------------------------------------------------------------------------------------
2. 数据非空验证
function checkUser() {
// 1.数据非空验证
var user = isEmpty(login, error_email, error_psw);
return user ? verfiy(user, result) : false;
}
submit.addEventListener('click',checkUser,false);
// 非空验证
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
}
}
---------------------------------------------------------------------------------------------------------------------
3.ajxa请求验证
function verfiy(user,resilt){
// 创建request对象
var request = new XMLHttpRequest();
// 监听响应状态
request.onreadystatechange = function(){
if(request.readyState === 4){//准备就绪
console.log(request.responseText);
result.innerHTML = request.responseText;
}
return false;
};
// 设置请求参数
request.open('post','admin/check.php',true);
// 设置头信息,将内容类型设置为表单提交方式
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
// 发送请求
// 要提交是数据
var data = 'email=' + user.email + '&password=' + user.password;
request.send(data);
}
login.email.addEventListener('input',function(){
error_email.innerText = '*';//清除邮箱的错误的提示
result.innerText = '';//清除服务器返回的验证提示
},
false);
login.password.addEventListener('input',function(){
error_psw.innerText = '*';//清除邮箱密码的错误的提示
result.innerText = '';//清除服务器返回的验证提示
},
false);
实例
<!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 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>
// 获取必要的元素
var login = document.forms.namedItem('login');
var submit = document.getElementById('submit');
var error_email = document.getElementById('error_email');
var error_psw = document.getElementById('error_psw');
var result = document.getElementById('result');
function checkUser() {
// 1.数据非空验证
var user = isEmpty(login, error_email, error_psw);
return user ? verfiy(user, result) : false;
}
submit.addEventListener('click',checkUser,false);
// 非空验证
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
}
}
// 5555555555555555555555555
function verfiy(user,resilt){
// 创建request对象
var request = new XMLHttpRequest();
// 监听响应状态
request.onreadystatechange = function(){
if(request.readyState === 4){//准备就绪
console.log(request.responseText);
result.innerHTML = request.responseText;
}
return false;
};
// 设置请求参数
request.open('post','admin/check.php',true);
// 设置头信息,将内容类型设置为表单提交方式
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
// 发送请求
// 要提交是数据
var data = 'email=' + user.email + '&password=' + user.password;
request.send(data);
}
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>运行实例 »
点击 "运行实例" 按钮查看在线实例
二.选项卡
实例
<!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>
<style>
h2 {
text-align: center;
}
.box {
width: 538px;
height: 500px;
background-color: white;
border: 1px solid #ccc;
margin: 20px auto;
color: #363636;
}
.box > ul {
margin: 0;
padding: 0;
background-color: #f8f8f8;
/*border-bottom: 1px solid #ccc;*/
overflow: hidden;
}
.box > ul li {
list-style-type: none;
width: 90px;
height:36px;
float:left;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
text-align: center;
line-height: 36px;
}
.box ul + span {
float:right;
width:90px;
height: 36px;
line-height: 36px;
margin-top: -36px;
}
.box ul + span >a {
color: #696969;
text-decoration: none;
}
.box li.active {
background-color: #fff;
font-weight: bolder;
border-bottom: none;
border-top: 3px solid orangered;
}
.box div {
display: none;
}
.box div ul {
margin: 0;
padding: 10px;
list-style-type: none;
}
.box div ul li {
line-height: 1.5em;
/*background-color: yellow;*/
}
.box div ul li a {
color: #636363;
text-decoration: none;
}
.box div ul li a:hover {
color: #000;
}
.box div ul li span {
float: right;
color: red;
}
</style>
</head>
<body>
<!-- 掌握循环操作 -->
<h2>仿PHP中文网选项卡</h2>
<div class="box">
<ul>
<!-- 创建四个选项卡,并设置第一个为当前激活高亮状态 -->
<li class="active">技术文章</li>
<li>网站源码</li>
<li>原生手册</li>
<li>推荐博文</li>
</ul>
<span><a href="">更多下载>></a></span>
<!-- 技术文章 -->
<div style="display: block;">
</div>
<!-- 网站源码 -->
<div>
</div>
<!-- 原生手册 -->
<div>
</div>
<!-- 推荐博文 -->
<div>
</div>
</div>
<script>
// 获取选项卡对应显示的内容区对象
var box = document.getElementsByClassName('box')[0];
var ul = box.getElementsByTagName('ul')[0];
var tab = ul.getElementsByTagName('li');
var list = box.getElementsByTagName('div');
// 给每一个选项卡添加事件,因为有四个选项卡,所有用循环来添加
for (var i=0;i<tab.length; i++){
// 为选项卡添加一个自定义属性
tab[i].index = i;
// 清空当前用户的所有操作
tab[i].addEventListener('click', getData, false);
}
function getData () {
for(var i =0;i<tab.length;i++){
// 将除了当前的标签之外的标签样式清空
tab[i].className = '';
// 将除了当前信息列表之外的列表全部隐藏
list[i].style.display = 'none';
}
// 激活标签样式
this.classList.add('active');
list[this.index].style.display = 'block';
// ajax获取数据
var n = this.index;
// 创建request对象
var request = new XMLHttpRequest();
request.onreadystatechange = function(){
// 判断一下看看readystate是不是等于4
if(request.readyState === 4){
list[n].innerHTML = request.responseText;
}
};
request.open('get','admin/data.php?p='+n,true);
request.send(null);
}
// 模拟点击操作, 获取默认页数据, 这里假定第一页是默认标签页
var defaultTab = ul.firstElementChild;
defaultTab.addEventListener('click',show,false);
var event =new Event('click');
// 将事件click分配/派发给指定的元素, 注意, 这里不需要用户参与,会自动执行, 相当于用户选择了首页
defaultTab.dispatchEvent(event);
function show(){
// 1.创建request对象
var request = new XMLHttpRequest();
// 2.监听请求变化
request.onreadystatechange = function(){
if(request.readyState === 4){
list[0].innerHTML = request.responseText;
}
};
// 3.请求初始化
request.open('get', 'admin/data.php?p=0', true);
// 4.发送请求
request.send(null);
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
总结一下:
首先,我发现了一个问题,代码大小写一定要看清楚,因为大小写和写错是不会报错的,比较容易做不到问题所在
ajxa并不算太难,主要是有规律的,比较容易掌握,除非再进阶