博客列表 >表单的传统验证,表单的Ajax验证,体验异步请求的好处-2019年1月18日20:00

表单的传统验证,表单的Ajax验证,体验异步请求的好处-2019年1月18日20:00

小淇的博客
小淇的博客原创
2019年01月21日 09:50:11800浏览

要点一:onsubmit    表单提交事件,用户提交表单时触发

要点二:onblur    失去焦点事件:控件失去焦点时触发

要点三:onfocus    获取焦点事件,空间获取焦点是触发

要点四:oninput    输入框发生变化时触发

submit():提交表单,表单元素上调用,提交脚本不需要事件出触发

reset():重置表单控件值

focus():设置控件焦点

传统表单实例

<!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>Document</title>
</head>
<body>
<h2>用户登录</h2>
<form action="admin.php" method="POST" name="login">
<p>
<label for="name">用户:</label>
<input type="text" name="name" id="name">
<span style="color:red" id="name-tips">*</span>
</p>
<p>
<label for="password">密码:</label>
<input type="password" name="password" id="password">
<span style="color:red" id="name-tips">*</span>
</p>
<p><button>登录</button></p>
</form>
<script>
// forms返回文档中所有form对象的引用
var form =document.forms['login'];
form.name.focus();
form.onsubmit = function(){
if(form.name.value.length === 0) {
alert('用户名不能为空');
// 焦点自动跳转用户空间
form.name.focus();
// 返回一个false就不会跳转
return false;
} else if (form.password.value.length === 0){
alert('密码不能为空');
form.name.focus();
return false;
}
// confirm()对话框也alert()不同,多一个取消按钮,返回布尔值true或false
if(confirm('确认登陆吗?')){
return ture;
} else {
return false;
}
}
</script>
</body>
</html>

运行实例 »

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

get和post请求与传统的表单验证

1.HTTP协议: 超文本传输协议

       2.超文本: 超文本就是使用超文本标记语言(HTML)编写的文档

       3.HTTP协议用途: 确保HTML文档可靠完整安全的从服务器传送到浏览器

       4.TCP/IP协议: HTTP使用的通信协议,可以确保以上目标的实现

         备注: 目前HTTP协议不仅用来发送HTML,还可以用于其它类型的数据(参看其它书籍)


       5.HTTP运行原理: 基于 "请求(Request)" 与 "响应(Response)" 机制

       6.HTTP请求类型: 主要有 "GET"请求 和 "POST"请求


       7.GET请求: 顾名思义, 就是客户端从服务器上获取资源,典型的读操作,不会对服务器数据有任何影响

         通常GET请求时会带上用户的请求参数做为条件,这些参数会以?开始的键值对方式出现在URL地址中


       8.POST请求: 本义是"发布",用户将内容提交到服务器进行发布,典型的写操作,会影响到服务器数据

         POST请求的数据量通常比较大,信息也比较敏感(如密码,手机号等),不适合放在URL中(URL对参数长度有限制)

         所以,POST请求的用户数据,在存放在请求头(header)中一并提交到服务器上的

实例

<h2>用户登录</h2>
     <form action="admin/check.php" method="POST">
        <p>
          <label for="email">邮箱:</label>
          <input type="email" name="email">
        </p>
        <p>
          <label for="password">密码:</label>
          <input type="password" name="password">
        </p>

        <p><button>登录</button></p>
     </form>

运行实例 »

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


---------------------------------------------------------------------------------------------------------------------------------

Ajax原理与应用

1. Ajax: 用户与服务器之间进行异步交互

       2. 同步: 所有操作按事先约定的步骤进行,前面工作未完成,后面工作不能开始,遇到执行时间过长的操作,会千万阻塞

           例如传统的表单提交,在等待服务器处理结果返回之前,用户只能等待

       3. 异步: 所有操作放到队列中,前一个操作不必等到执行结果,后一个操作就可以开始,前一操作执行完成后通过事件通知调用者即可

           所以, 异步是基于事件机制的, 并通过事先设置的回调函数来处理响应数据, 不会形成阻塞

       

       4. 同步与异步的根本区别在于: 请求发出后, 是否需要等待结果, 必须等待结果就是同步, 不用等待继续执行就是异步


       5. Ajax: 执行异步操作最有用的工具,可以代理用户的请求,并对执行结果进行回调处理,例如局部刷新,非阻塞验证等


       6. 所有Ajax操作,都是通过一个: XMLHttpRequest 对象来实现

实例

     <h2>用户登录</h2>
     <form action="admin/check01.php" method="POST">
        <p>
          <label for="email">邮箱:</label>
          <input type="email" name="email">
        </p>
        <p>
          <label for="password">密码:</label>
          <input type="password" name="password">
        </p>
        
        <p>
            <button>登录</button>
            <!-- 占位符:显示提示信息 -->
          <span id="tips" style="color:red"></span>
        </p>
     </form>

     <!-- 异步Ajax验证 -->
     <script>
         // 获取表单对象与控件
         var login = document.forms['login'];
         var email = document.getElementsByName('email')[0];
         var password = document.getElementsByName('password')[0];
         var btn = document.getElementsByTagName('button')[0];
         var tips = document.getElementById('tips');
    
         
         // 验证邮箱
         
         email.onblur = function () {
            //1. 创建ajax请求对象
            var request = new XMLHttpRequest();

            //2. 请求成功的回调处理
            request.onreadystatechange = function () {  
                // 当请求完成(4)并成功的获取到了数据(200)    
                if (this.readyState === 4 && this.status === 200) {
                    // 更新提示信息               
                    tips.innerHTML = this.responseText;
                }
            }

            //3. 设置请求参数
            request.open('POST', 'admin/check01.php', true);

            //4. POST请求需要设置请求头信息
            request.setRequestHeader('content-type', 'application/x-www-form-urlencoded');

            //5. 发送请求
            request.send('email=' + email.value + '&password=' + password.value);
            
         }

         // 用户修改信息时,清空提示信息
         email.oninput = function () {
             tips.innerHTML = '';
         }


         // 验证密码
         password.onblur = function () {
            //1. 创建ajax请求对象
            var request = new XMLHttpRequest();

            //2. 请求成功的回调处理
            request.onreadystatechange = function () {  
                // 当请求完成(4)并成功的获取到了数据(200)    
                if (this.readyState === 4 && this.status === 200) {
                    // 更新提示信息               
                    tips.innerHTML = this.responseText;
                }
            }

            //3. 设置请求参数
            request.open('POST', 'admin/check01.php', true);

            //4. POST请求需要设置请求头信息
            request.setRequestHeader('content-type', 'application/x-www-form-urlencoded');

            //5. 发送请求
            request.send('email=' + email.value + '&password=' + password.value);
            
         }

         // 用户修改信息时,清空提示信息
         password.oninput = function () {
             tips.innerHTML = '';
         }


        
         // 上面的邮箱和密码的验证有很多重复代码, 可以通过将公共代码封装到函数用,实现代码复用,请自己完成

         
             
            btn.onclick = function () {
                if (email.value.length > 0 && password.value.length > 0) {
                    tips.innerHTML = '登录成功,正在跳转...';
                    
                    setTimeout(function (){
                        location.href = 'admin/index.php';
                    }, 2000);
                } else {
                    tips.innerHTML = '邮箱和密码不能为空';
                }         
            return false;
         }              
     </script>
</body>
</html>


声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议