Correction status:Uncorrected
Teacher's comments:
1.使用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> // 获取必要的元素,以及提示信息的占位符元素 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'); // 为提交按钮设置点击事件, 并分配一个事件响应函数(只需要名称即可) 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; } /*****************************************************************/ // 非空验证函数 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来实现 } 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>
点击 "运行实例" 按钮查看在线实例
<!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> // 获取必要的元素,以及提示信息的占位符元素 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'); // 为提交按钮设置点击事件, 并分配一个事件响应函数(只需要名称即可) 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; } /*****************************************************************/ // 非空验证函数 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来实现 } 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>
点击 "运行实例" 按钮查看在线实例
2.使用ajax制作选项卡
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <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> <!-- 其实你在页面中看到列表,其实都已经在页面中了,只是隐藏了起来,实际开发过程,大多是通过Ajax请求来动态获取 --> <div style="display: block;"> <ul> <li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>05-15</span></li> <li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>05-15</span></li> <li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>05-15</span></li> <li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>05-15</span></li> <li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>05-15</span></li> <li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>05-15</span></li> <li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>05-15</span></li> <li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>05-15</span></li> <li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>05-15</span></li> <li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>05-15</span></li> <li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>05-15</span></li> <li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>05-15</span></li> <li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>05-15</span></li> <li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>05-15</span></li> <li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>05-15</span></li> <li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>05-15</span></li> <li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>05-15</span></li> <li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>05-15</span></li> </ul> </div> <div> <ul> <li><a href="">前端模板 | Bootstrap响应式网站后台管理面板</a><span>05-15</span></li> <li><a href="">前端模板 | Bootstrap响应式网站后台管理面板</a><span>05-15</span></li> <li><a href="">前端模板 | Bootstrap响应式网站后台管理面板</a><span>05-15</span></li> <li><a href="">前端模板 | Bootstrap响应式网站后台管理面板</a><span>05-15</span></li> <li><a href="">前端模板 | Bootstrap响应式网站后台管理面板</a><span>05-15</span></li> <li><a href="">前端模板 | Bootstrap响应式网站后台管理面板</a><span>05-15</span></li> <li><a href="">前端模板 | Bootstrap响应式网站后台管理面板</a><span>05-15</span></li> <li><a href="">前端模板 | Bootstrap响应式网站后台管理面板</a><span>05-15</span></li> <li><a href="">前端模板 | Bootstrap响应式网站后台管理面板</a><span>05-15</span></li> <li><a href="">前端模板 | Bootstrap响应式网站后台管理面板</a><span>05-15</span></li> <li><a href="">前端模板 | Bootstrap响应式网站后台管理面板</a><span>05-15</span></li> <li><a href="">前端模板 | Bootstrap响应式网站后台管理面板</a><span>05-15</span></li> <li><a href="">前端模板 | Bootstrap响应式网站后台管理面板</a><span>05-15</span></li> <li><a href="">前端模板 | Bootstrap响应式网站后台管理面板</a><span>05-15</span></li> <li><a href="">前端模板 | Bootstrap响应式网站后台管理面板</a><span>05-15</span></li> <li><a href="">前端模板 | Bootstrap响应式网站后台管理面板</a><span>05-15</span></li> <li><a href="">前端模板 | Bootstrap响应式网站后台管理面板</a><span>05-15</span></li> <li><a href="">前端模板 | Bootstrap响应式网站后台管理面板</a><span>05-15</span></li> </ul> </div> <div> <ul> <li><a href="">原生手册 | CentOS7安装MySQL5.7密码查看与修改</a><span>05-15</span></li> <li><a href="">原生手册 | CentOS7安装MySQL5.7密码查看与修改</a><span>05-15</span></li> <li><a href="">原生手册 | CentOS7安装MySQL5.7密码查看与修改</a><span>05-15</span></li> <li><a href="">原生手册 | CentOS7安装MySQL5.7密码查看与修改</a><span>05-15</span></li> <li><a href="">原生手册 | CentOS7安装MySQL5.7密码查看与修改</a><span>05-15</span></li> <li><a href="">原生手册 | CentOS7安装MySQL5.7密码查看与修改</a><span>05-15</span></li> <li><a href="">原生手册 | CentOS7安装MySQL5.7密码查看与修改</a><span>05-15</span></li> <li><a href="">原生手册 | CentOS7安装MySQL5.7密码查看与修改</a><span>05-15</span></li> <li><a href="">原生手册 | CentOS7安装MySQL5.7密码查看与修改</a><span>05-15</span></li> <li><a href="">原生手册 | CentOS7安装MySQL5.7密码查看与修改</a><span>05-15</span></li> <li><a href="">原生手册 | CentOS7安装MySQL5.7密码查看与修改</a><span>05-15</span></li> <li><a href="">原生手册 | CentOS7安装MySQL5.7密码查看与修改</a><span>05-15</span></li> <li><a href="">原生手册 | CentOS7安装MySQL5.7密码查看与修改</a><span>05-15</span></li> <li><a href="">原生手册 | CentOS7安装MySQL5.7密码查看与修改</a><span>05-15</span></li> <li><a href="">原生手册 | CentOS7安装MySQL5.7密码查看与修改</a><span>05-15</span></li> <li><a href="">原生手册 | CentOS7安装MySQL5.7密码查看与修改</a><span>05-15</span></li> <li><a href="">原生手册 | CentOS7安装MySQL5.7密码查看与修改</a><span>05-15</span></li> <li><a href="">原生手册 | CentOS7安装MySQL5.7密码查看与修改</a><span>05-15</span></li> </ul> </div> <div> <ul> <li><a href="">无耻的鱼 | javascript初体验之图片切换与计算机</a><span>05-15</span></li> <li><a href="">无耻的鱼 | javascript初体验之图片切换与计算机</a><span>05-15</span></li> <li><a href="">无耻的鱼 | javascript初体验之图片切换与计算机</a><span>05-15</span></li> <li><a href="">无耻的鱼 | javascript初体验之图片切换与计算机</a><span>05-15</span></li> <li><a href="">无耻的鱼 | javascript初体验之图片切换与计算机</a><span>05-15</span></li> <li><a href="">无耻的鱼 | javascript初体验之图片切换与计算机</a><span>05-15</span></li> <li><a href="">无耻的鱼 | javascript初体验之图片切换与计算机</a><span>05-15</span></li> <li><a href="">无耻的鱼 | javascript初体验之图片切换与计算机</a><span>05-15</span></li> <li><a href="">无耻的鱼 | javascript初体验之图片切换与计算机</a><span>05-15</span></li> <li><a href="">无耻的鱼 | javascript初体验之图片切换与计算机</a><span>05-15</span></li> <li><a href="">无耻的鱼 | javascript初体验之图片切换与计算机</a><span>05-15</span></li> <li><a href="">无耻的鱼 | javascript初体验之图片切换与计算机</a><span>05-15</span></li> <li><a href="">无耻的鱼 | javascript初体验之图片切换与计算机</a><span>05-15</span></li> <li><a href="">无耻的鱼 | javascript初体验之图片切换与计算机</a><span>05-15</span></li> <li><a href="">无耻的鱼 | javascript初体验之图片切换与计算机</a><span>05-15</span></li> <li><a href="">无耻的鱼 | javascript初体验之图片切换与计算机</a><span>05-15</span></li> <li><a href="">无耻的鱼 | javascript初体验之图片切换与计算机</a><span>05-15</span></li> <li><a href="">无耻的鱼 | javascript初体验之图片切换与计算机</a><span>05-15</span></li> </ul> </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'; } </script> </body> </html>
点击 "运行实例" 按钮查看在线实例