1、表单

表单是一个包含表单元素的区域。

表单元素允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。

表单使用表单标签来设置，如下列代码所示：

<form>    *
    input元素等
    *
</form>

2、表单校验

表单校验是指：用户在html页面的form表单中填写的内容，在向服务器提交之前，需要在前端完成对表单内的数据完整性和正确的格式进行校验，校验不通过不予以提交并给出提示。以避免服务器收到错误数据（导致对服务器的多余访问）。

常用于表单的校验业务如下：非空（账号密码）、手机号格式、邮箱格式、密码复杂度。

3、表单提交

表单提交的常见操作方式：

1、表单中使用submit提交按钮

2、form表单使用onsubmit属性，值为true才会被提交（结合js使用）

3、不使用submit，改用button的onclick事件，使用js做表单提交操作（js主动操作表单对象执行提交，提交操作可控） 4、使用Ajax进行异步提交表

..........还有其他形式的表单提交方式，这里就不一一进行讲解了，感兴趣的小伙伴们可以自行去找资料进行了解哦。

下列代码将对前四种表单提交的方式一一进行讲解，具体代码展示如下。

3.1 html的form提交

直接通过html的form提交，代码如下：

<!--方式1：使用submit按钮--><formaction="indexform.do"method="post"><inputtype="text"name="username"placeholder="账号"/><br/><inputtype="password"name="password"placeholder="密码"/><br/><inputtype="radio"name="sex"value="男"checked="checked"/>男
<inputtype="radio"name="sex"value="女"/>女<br/><inputtype="radio"name="usertype"value="student"checked="checked"/>学生
<inputtype="radio"name="usertype"value="teacher"/>老师<br/><inputtype="submit"value="提交"></form>

但有时候我们会出于安全角度考虑，给用户输入的密码进行加密，方法一就没办法解决这个问题，这是个需要注意的点。

3.2 onsubmit属性

form表单根据onsubmit属性事件决定是否提交，并触发js表单校验。

<!--方式2：js表单校验后由form表单onsubmit属性决定是否提交--><!-- 由submit按钮触发 form表单新增onsubmit的事件，结果为true则提交 --><formaction="indexform.do"method="post"onsubmit="return sub1();"><inputid="t_username"type="text"name="username"placeholder="账号"/><br/><inputid="t_password"type="password"name="password"placeholder="密码"/><br/><inputtype="radio"name="sex"value="男"checked="checked"/>男
<inputtype="radio"name="sex"value="女"/>女<br/><inputtype="radio"name="usertype"value="student"checked="checked"/>学生
<inputtype="radio"name="usertype"value="teacher"/>老师<br/><inputtype="submit"value="提交"/></form><scripttype="text/javascript">functionsub1(){
if(checkname()&&checkpwd()){
returntrue;
          }
//return false;//缺陷：万一方法体没有返回值，则表单也会自动提交，失去了校验的意义，不推荐      }
//判断用户名是否为空functioncheckname(){
vart_username=$("#t_username").val();
if(t_username==""){
alert("请输入账号")
returnfalse;
            }
returntrue;
        }
//判断密码是否为空functioncheckpwd(){
vart_password=$("#t_password").val();
if(t_password==""){
alert("请输入密码")
returnfalse;
            }
returntrue;
        }
</script>

注意，sub1()方法中，return true时，表单才会正常提交，为false时，浏览器将不会提交，通常是用户的密码输入错误时，终止提交。这种方法有个缺点就是，打乱正常的表单提交程序。

3.3 使用onclick事件

不使用submit，将input中的type属性改为button，再使用其onclick事件，使用js做表单提交操作（js主动操作表单对象执行提交，提交操作可控）,使用onclick触发表单校验函数：由js主动提交。

<!-- 方式3：js表单校验后，由js触发表单提交 --><!-- 不在使用submit按钮，而是使用onclick事件调用js校验，完成后由js来操作表单提交--><formid="f_sub"action="indexform.do"method="post"><inputid="t_username"type="text"name="username"placeholder="账号"/><br/><inputid="t_password"type="password"name="password"placeholder="密码"/><br/><inputtype="radio"name="sex"value="男"checked="checked"/>男
<inputtype="radio"name="sex"value="女"/>女<br/><inputtype="radio"name="usertype"value="student"checked="checked"/>学生
<inputtype="radio"name="usertype"value="teacher"/>老师<br/><inputtype="button"onclick="sub2()"value="提交"/></form><scripttype="text/javascript"src="js/jquery.min.js"></script><scripttype="text/javascript">functionsub2(){
if(checkname()&&checkpwd()){
$("#f_sub").submit()//js主动操作表单对象提交，推荐，提交操作可控           }
      }
//判断用户名是否为空functioncheckname(){
vart_username=$("#t_username").val();
if(t_username==""){
alert("请输入账号")
returnfalse;
            }
returntrue;
        }
//判断密码是否为空functioncheckpwd(){
vart_password=$("#t_password").val();
if(t_password==""){
alert("请输入密码")
returnfalse;
            }
returntrue;
        }
</script>

推荐使用第三种，操作起来比较安全，避免后期修改代码时的遗漏导致的提交数据BUG，或者在某些事件代码块失效，以至于代码无法进行使用。

3.4 使用Ajax进行异步请求

使用Ajax进行异步请求处理，整个页面只会局部的进行刷新，地址栏不会变动。

<body><!-- 方式4：使用Ajax异步提交数据--><inputid="t_username"type="text"name="username"placeholder="账号"/><br/><inputid="t_password"type="password"name="password"placeholder="密码"/><br/><inputtype="radio"name="sex"value="男"checked="checked"/>男
<inputtype="radio"name="sex"value="女"/>女<br/><inputtype="radio"name="usertype"value="student"checked="checked"/>学生
<inputtype="radio"name="usertype"value="teacher"/>老师<br/><inputtype="button"onclick="sub3()"value="提交"/><scripttype="text/javascript"src="js/jquery.min.js"></script><scripttype="text/javascript">//判断用户名是否为空functioncheckname(){
vart_username=$("#t_username").val();
if(t_username==""){
alert("请输入账号")
returnfalse;
            }
returntrue;
        }
//判断密码是否为空functioncheckpwd(){
vart_password=$("#t_password").val();
if(t_password==""){
alert("请输入密码")
returnfalse;
            }
returntrue;
        }
functionsub3(){
vart_username=$("#t_username").val();
if(t_username==""){
alert("请输入账号")
return ;
            }
vart_password=$("#t_password").val();
if(t_password==""){
alert("请输入密码")
return;
            }
vart_sex=$("input[type='radio'][name='sex']:checked").val();
vart_usertype=$("input[type='radio'][name='usertype']:checked").val();//jquery选择器$.ajax({
url:"indexform.do",//数据提交到哪里去的一个地址type:"post",
//async:false,//默认true是异步提交 同步等待信息提交结束完 同时在相对应的servlet让线程sleep一段时间data:{username:t_username,password:t_password,sex:t_sex,usertype:t_usertype}, //数据   以键值对的形式写入dataType:"text",
success:function (obj){ //obj：接收后台变量的一个响应alert("ajax获得响应："+obj);
                },
error:function (obj){
alert("ajax请求失败！");
                }
            });
        }
</script></body>

有异步提交方式，那么是否会有同步提交方式呢？异步提交方式具体是怎么样的呢？下面我们就来一起再次探索一下叭

4、扩展：Ajax

在3.4中我们浅用了一下ajax的异步提交，接下来我们来进一步了解一下Ajax叭，看看是否会有同步提交方式，异步提交方式具体是怎么样的。

4.1 Ajax简介

Ajax ( Asynchronous JavaScript And XML)并非编程语言，Ajax是JQuery实现XMLHttpRequest的一种方式。

Ajax 仅仅组合了：

浏览器内建的 XMLHttpRequest 对象（从 web 服务器请求数据）
JavaScript 和 HTML DOM（显示或使用数据）

Ajax 是一个令人误导的名称。Ajax 应用程序可能使用 XML 来传输数据，但将数据作为纯文本或 JSON 文本传输也同样常见。Ajax通过在后台与服务器进行少量数据交换，可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新，而不需要重新加载整个页面。

AJAX工作原理图.png

如上图所示，具体流程大概分为以下7步：

网页中发生一个事件（页面加载、按钮点击）
由 JavaScript 创建 XMLHttpRequest 对象
XMLHttpRequest 对象向 web 服务器发送请求
服务器处理该请求
服务器将响应发送回网页
由 JavaScript 读取响应
由 JavaScript 执行正确的动作（比如更新页面）

注：关于同步提交方式和异步提交方式具体的知识点，都藏在后续的文章里啦！

今天的分享到此就结束啦！谢谢各位看完的小伙伴，有什么不足的地方欢迎指出，相互学习，共同进步。

表单校验与4种提交方式