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

首页 > 博客列表 > 使用Ajax验证表单数据;使用Ajax制作选项卡05-15

博主信息

博文 18

粉丝 0

访问量 12768

专题推荐

更多>

实例

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

运行实例 »

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

批改状态：未批改

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

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

2019-04-23 14:36:19