Community Learn Tools Library Leisure
search
English
Home > List of blog posts > Ajax验证表单数据 和制作选项卡--2019-05-15
Blogger Information
Blog 40
fans 0
comment 0
visits 29358
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
Ajax验证表单数据 和制作选项卡--2019-05-15
小人物的博客
Original
666 people have browsed it

  1. 使用Ajax验证表单数据

  2. 实例

    <!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="text" id="email" name="email" placeholder="example@gmail.com">
            <span style="color: red"  id="err_email">*</span>
        </P>
        <P>
            <label for="psw">密码:</label>
            <input type="password" id="psw" name="psw" placeholder="不少于6位">
            <span style="color: red"  id="err_psw">*</span>
        </P>
        <button id="submit" type="button">提交</button>
        <span id="result"></span>
    </form>
<script>
    //获取表单对象
    var login = document.forms.namedItem('login');
    var submit = document.getElementById('submit');
    var err_email = document.getElementById('err_email');
    var err_psw = document.getElementById('err_psw');
    var result = document.getElementById('result');

    //点击提交
    submit.addEventListener('click',checkUser,false);

    function checkUser() {
        //检查是否为空
        var user = isEmpty(login,err_email,err_psw);

        return user ? verfiy(user,result) : false;
    }

    function isEmpty(form,err1,err2) {
        //trim()过滤左右空格
        var email = form.email.value.trim();
        var psw = form.psw.value.trim();

        if (email.length === 0 ) {
            err1.innerHTML = '邮箱不能为空!';
            form.email.focus();
            return false;
        } else if (psw.length === 0) {
            err2.innerHTML = '密码必须填写!';
            form.psw.focus();
            return false;
        }

        return {
            email: email,
            psw: psw
        }
    }

    //检验数据
    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;
            }
            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.psw;
        request.send(data);
    }

    login.email.addEventListener('input',function(){
        err_email.innerHTML = '';
        result.innerHTML = '';
    },false);
    login.psw.addEventListener('input',function(){
        err_psw.innerHTML = '';
        result.innerHTML = '';
    },false);


</script>
</body>
</html>

    运行实例 »

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

    3.使用Ajax制作选项卡


  3. 实例

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用Ajax制作选项卡</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>
        //先取得box
         var box = document.getElementsByClassName('box')[0];
         //取得box中的ul
         var ul = box.getElementsByTagName('ul')[0];
         //取得ul中的所有li
         var tab = ul.getElementsByTagName('li');
         //取得div
         var list = box.getElementsByTagName('div');


         for (var i=0 ; i<tab.length; i++) {
             //这一步非常关键:为当前的选项卡添加自定义属性index
             //思考: 为什么不直接添加到li标签中,而写在js代码中?
             //解答:因为html页面渲染的时候,有可能过滤掉用户自定义属性,所以我们要用js动态添加
             //tab[i]: 加上序号才可以找到对应的选项卡,添加自定义属性,相当于对对象添加属性,所以使用点语法
             //这里的i,就是当前用户正的点击的选项卡的索引,其实就是当前对象的编号
             //思考:为什么我们获取当前用户点击的选项卡的序号呢?
             //答: 因为选项卡必须要和下面的信息列表list一一对应,所以必须要知道当前用户点击的是哪个?
             tab[i].index = i;
             //为所有li 添加click事件
             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');
            // 将对应的信息列表显示出来:直接修改其display属性为block
            list[this.index].style.display = 'block';
        }
    </script>
</body>
</html>

    运行实例 »

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

    4.通过本节课程学习到:

    元素是可以嵌套的,所以我们除了可以在document对象上调用这些方法外,还可以在元素上调用
    该方法是根据标签名来获取元素,因为页面中可以多个同名标签,所以返回的也是一个数组,要加[0]指定元素


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