表单验证后提交 两种方式 2016/07/10
————————————————前面比较啰嗦，具体方法在最后————————————
今天使用ajax，在增加用户，点击保存后，先不提交，先判断填写的信息，然后确定是否提交。
这是做的第一个练手的项目，之前跟着视频学习，学到项目视频被加密了，只有项目第一天的视频可以看，不过第一天收获也很大，项目刚开始时候使用S2SH怎么一步步整合。都是先看一遍，再看着写一遍，再自己写一遍。学到的挺多的。
尽管后面几天的项目的视频被加密了，但还好只是视频加密了，资料还可以看。所以这几天都是看着资料来慢慢摸索着做。
————————————————以上算是背景——————————————————
所以，今天的目标是使用ajax异步判断，由于讲知识点的人和讲项目的人不一样，从资料中看出，俩个人用的不太一样。而且，感觉项目还没有之前学知识点时候优化的好。现在是提交表单后再校验。而且这个项目老师特地把ajax的async属性值写为false，就成了非异步了。而在学知识点时，是用的异步方式，填完一个文本框，写的焦点失去方法，焦点失去后，使用ajax到action的方法中，方法会查询数据库判断进行校验，而且json使用框架自动封装。现在不是这样，把我搞糊涂了。不过今天的主题是表单验证后再提交，那个ajax等我搞明白了再写吧。
——————————————终于正文啦!!——————————————————————
正是由于以上的背景，今天我一看目标是使用ajax，就知道在前端jsp页面中，肯定会有变化。果然，加了两个function();一个是doVerify(),看名字就知道是校验的
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);
}
});
}
}//提交表单
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();
//return true;
}//else{return false;}
}doVerify中的ajax的url属性中看出，调用的是verifyAccount.action,根据我配置的struts.xml基本确定在action中相比昨天，新写了verifyAccount方法。并且两个方法中都是用了jquery的定为方式$("#account")等，又看了下jsp页面，果然相比昨天，又在input中新增了id属性。
再一想，新增了两个方法，肯定得被调用才行啊，一看资料中的 保存 按钮的代码 果然新增了onclick属性
当时没看到这个区别，直接上手在后面加了onclick，又写了俩function，把action写全功能，（当然，action要调用service，service调用dao，所以这些都要补充上方法）
写完后很高兴，开始测试，结果出问题了。
输入网址，进入增加的页面，什么都不填写，点击保存，应该会有弹出框提示“用户名不能为空”，点击确定后还在原页面。
但我测试是，也确实弹出提醒了，但点击确定后却回到list页面（也就是上一个页面）。
这就让我很不解，又在jsp中关键地方写上alert查看是否是正确的值等等方法吧。
总之，最后突然看到浏览器的地址栏。结尾的是user_add.action。再结合弹出提示框之后直接到首页（列表页），想到，根据我的配置，user_add.action的result就是重定向到list页面的，而只有浏览器会发送这个地址到服务器，服务器才会启动struts的拦截器拦截，执行方法并跳转。但这时还没想到去查看type是否变化了，因为这时我找到了解决的办法。
在form中写上 onsubmit属性
然后我把doSubmit()改为如下
//提交表单
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();
return true;
}else{return false;}
}这个解决方法是因为，form的这个onsubmit的属性，是在表单提交前默认执行的，若属性设置了，就会执行这个属性指定的方法。估计一般就是用在表单提交前的校验。所以必须要写return。而调用的function的返回值只有是false才会阻值提交。true或没有返回值都会提交。
这样就算是解决问题了。但问题是，当我点击保存后，会弹出两次对话框。当时我还没意识到这意味这什么，毕竟问题解决了，大不了我把按钮中的onclick去掉。
但我确实不甘心，资料上这么写的，那就是成功了，为什么我这么写不成功呢？
这才想到，之前没做校验时，表单是怎么提交的？form中只写了action属性。这才想到， 保存 按钮使用的submit的类型。
再联想之前的情况，确实至少有两次自己可以早点想到这个问题，但也幸亏这样才知道好多表单校验后提交的方法。
—————————————阻止表单提交的方法—————送干货了————————————————
表单校验后提交：
方式1：
按钮的type设置为submit，在form属性中设置οnsubmit="return 方法"。form的onsubmit是在表单提交前执行的（同样的body有页面关闭前的事件onbeforeunload）。这就需要调用的方法进行校验工作，并返回true/false
方式2：
按钮的type设置为button，为这个按钮设置onclick事件οnclick="方法"。
这个方法进行校验工作，若符合就执行表单提交，用document.forms[0].submit()（这里forms[0]指第一个表单）；
若不符合就写return false。在js中，return true 表示返回正确的处理结果，return false表示返回结果，终止默认行为，不再执行之后的代码，这时也就跳出方法，没有走到方法中提交表单那一句。return 表示返回控制权到页面。
方式3：
这种方式是jqurey的方式，在页面加载时，给submit添加一个click事件
$(document).ready(function(){
$(:submit[id=submit]).click(function(check){
var name=$("#name").val();
if(name==""){
alert("姓名不能为空");
$("#name").focus;
check.preventDefault
}
});
});参考的文章：
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