使用Ajax验证表单数据;使用Ajax制作选项卡05-15 - 学习

Home > List of blog posts > 使用Ajax验证表单数据;使用Ajax制作选项卡05-15

Blogger Information

Blog 18

fans 0

comment 0

visits 9849

Special Recommendation

More>

Related recommendations

实例

<!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>

运行实例 »

点击 "运行实例" 按钮查看在线实例

Correction status：Uncorrected

Teacher's comments：

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

创建环境+html概念 2019-04-22

2019-04-23 14:36:19