表单验证后提交 两种方式 2016/07/10

————————————————前面比较啰嗦，具体方法在最后————————————

今天使用ajax，在增加用户，点击保存后，先不提交，先判断填写的信息，然后确定是否提交。

这是做的第一个练手的项目，之前跟着视频学习，学到项目视频被加密了，只有项目第一天的视频可以看，不过第一天收获也很大，项目刚开始时候使用S2SH怎么一步步整合。都是先看一遍，再看着写一遍，再自己写一遍。学到的挺多的。

尽管后面几天的项目的视频被加密了，但还好只是视频加密了，资料还可以看。所以这几天都是看着资料来慢慢摸索着做。

————————————————以上算是背景——————————————————

所以，今天的目标是使用ajax异步判断，由于讲知识点的人和讲项目的人不一样，从资料中看出，俩个人用的不太一样。而且，感觉项目还没有之前学知识点时候优化的好。现在是提交表单后再校验。而且这个项目老师特地把ajax的async属性值写为false，就成了非异步了。而在学知识点时，是用的异步方式，填完一个文本框，写的焦点失去方法，焦点失去后，使用ajax到action的方法中，方法会查询数据库判断进行校验，而且json使用框架自动封装。现在不是这样，把我搞糊涂了。不过今天的主题是表单验证后再提交，那个ajax等我搞明白了再写吧。

——————————————终于正文啦!!——————————————————————

正是由于以上的背景，今天我一看目标是使用ajax，就知道在前端jsp页面中，肯定会有变化。果然，加了两个function();一个是doVerify(),看名字就知道是校验的

<span style="font-size:18px;">var vResult = false;//校验帐号唯一性function doVerify(){//获取帐号alert("进入doVerfy()方法中");var account = $("#account").val();alert("account:"+account);if(account != ""){//校验$.ajax({url:"${basePath}nsfw/user_verifyAccount.action?time="+ new Date().getTime(),data:{"user.account":account},type:"POST",async:false,//非异步success:function(msg){alert("msg:"+msg);if("true"!=msg){//说明帐号已经存在alert("帐号已经存在，请使用其他帐号！");//光标定为到输入框$("#account").focus();vResult = false;}else{vResult = true;}alert("vResult:"+vResult);}});}}</span>

还有一个是doSubmit();

<span style="font-size:18px;">//提交表单function doSubmit(){var name = $("#name");if(name.val() == ""){alert("用户名不能为空");name.focus();return false;}var password = $("#password");if(password.val() == ""){alert("密码不能为空");password.focus();return false;}alert("将要调用doVerify()方法");//帐号校验doVerify();alert("调用doVerify()方法完成");//alert("vResult:"+vResult);if(vResult){//提交表单<span style="color:#cc0000;">document.forms[0].submit();</span>//return true;}//else{return false;}}</span>

我当时一看，果然不出所料。然后分别看了两个函数，很明显doSubmit调用了doVerify

doVerify中的ajax的url属性中看出，调用的是verifyAccount.action,根据我配置的struts.xml基本确定在action中相比昨天，新写了verifyAccount方法。并且两个方法中都是用了jquery的定为方式$("#account")等，又看了下jsp页面，果然相比昨天，又在input中新增了id属性。

再一想，新增了两个方法，肯定得被调用才行啊，一看资料中的 保存 按钮的代码 果然新增了onclick属性

<span style="font-size:18px;"><input type="button" class="btnB2" value="保存" onclick="" /></span>

但是请注意，下面是我当时的jsp页面 保存 按钮的代码。（我当时的代码就是前一天资料中的代码，由于今天的视频被加密，看不了，只能比对自己和当天所学的资料，判断什么是新增的功能）

<span style="font-size:18px;"><input type="submit" class="btnB2" value="保存" /></span>

其实我单独拿出来，就容易了，type属性变了，昨天还是submit今天就变成button了，就这把我坑了好久，不过也很幸运，找了好多资料。

当时没看到这个区别，直接上手在后面加了onclick，又写了俩function，把action写全功能，（当然，action要调用service，service调用dao，所以这些都要补充上方法）

写完后很高兴，开始测试，结果出问题了。

输入网址，进入增加的页面，什么都不填写，点击保存，应该会有弹出框提示“用户名不能为空”，点击确定后还在原页面。

但我测试是，也确实弹出提醒了，但点击确定后却回到list页面（也就是上一个页面）。

这就让我很不解，又在jsp中关键地方写上alert查看是否是正确的值等等方法吧。

总之，最后突然看到浏览器的地址栏。结尾的是user_add.action。再结合弹出提示框之后直接到首页（列表页），想到，根据我的配置，user_add.action的result就是重定向到list页面的，而只有浏览器会发送这个地址到服务器，服务器才会启动struts的拦截器拦截，执行方法并跳转。但这时还没想到去查看type是否变化了，因为这时我找到了解决的办法。

在form中写上 onsubmit属性

<span style="font-size:18px;"><form id="form" name="form" action="${basePath}nsfw/user_add.action" method="post" enctype="multipart/form-data" onsubmit="return doSubmit()"></span>

一定要写上 return

然后我把doSubmit()改为如下

<span style="font-size:18px;">//提交表单function doSubmit(){var name = $("#name");if(name.val() == ""){alert("用户名不能为空");name.focus();return false;}var password = $("#password");if(password.val() == ""){alert("密码不能为空");password.focus();return false;}alert("将要调用doVerify()方法");//帐号校验doVerify();alert("调用doVerify()方法完成");//alert("vResult:"+vResult);if(vResult){//提交表单//document.forms[0].submit();<span style="color:#cc0000;">return true;}else{return false;}</span>}</span>

注意红色字体与未改前的区别。就是把返回值return 。

这个解决方法是因为，form的这个onsubmit的属性，是在表单提交前默认执行的，若属性设置了，就会执行这个属性指定的方法。估计一般就是用在表单提交前的校验。所以必须要写return。而调用的function的返回值只有是false才会阻值提交。true或没有返回值都会提交。

这样就算是解决问题了。但问题是，当我点击保存后，会弹出两次对话框。当时我还没意识到这意味这什么，毕竟问题解决了，大不了我把按钮中的onclick去掉。

但我确实不甘心，资料上这么写的，那就是成功了，为什么我这么写不成功呢？

这才想到，之前没做校验时，表单是怎么提交的？form中只写了action属性。这才想到， 保存 按钮使用的submit的类型。

再联想之前的情况，确实至少有两次自己可以早点想到这个问题，但也幸亏这样才知道好多表单校验后提交的方法。

—————————————阻止表单提交的方法—————送干货了————————————————

表单校验后提交：

方式1： 

按钮的type设置为submit，在form属性中设置onsubmit="return 方法"。form的onsubmit是在表单提交前执行的（同样的body有页面关闭前的事件onbeforeunload）。这就需要调用的方法进行校验工作，并返回true/false

方式2：

按钮的type设置为button，为这个按钮设置onclick事件onclick="方法"。

这个方法进行校验工作，若符合就执行表单提交，用document.forms[0].submit()（这里forms[0]指第一个表单）；

若不符合就写return false。在js中，return true 表示返回正确的处理结果，return false表示返回结果，终止默认行为，不再执行之后的代码，这时也就跳出方法，没有走到方法中提交表单那一句。return 表示返回控制权到页面。

方式3：

这种方式是jqurey的方式，在页面加载时，给submit添加一个click事件

$(document).ready(function(){<span style="white-space:pre"></span>$(:submit[id=submit]).click(function(check){<span style="white-space:pre"></span>var name=$("#name").val();<span style="white-space:pre"></span>if(name==""){<span style="white-space:pre"></span>alert("姓名不能为空");<span style="white-space:pre"></span>$("#name").focus;<span style="white-space:pre"></span>check.preventDefault<span style="white-space:pre"></span>}<span style="white-space:pre"></span>});});

使用jquery对象的preventDefault的方法，就是阻值默认行为。这里submit的默认行为当然就是提交表单啦。

参考的文章：

http://blog.sina.com.cn/s/blog_683b7a840100l1v6.html

http://www.cnblogs.com/weiwang/archive/2013/08/19/3268374.html

http://blog.sina.com.cn/s/blog_8e0cc9dd0100uwwq.html