利用JS 阻止表单提交

情景一:不存在Ajax异步操作

 1 使用背景:会议室预定管理系统中,当表单提交的时候需要验证预约的时间是否符合预定规则(不需要通过访问服务器),否则提示错误信息,阻止表单提交。

 2 相关技术点:

form的两个事件

  1. submit,提交表单,如果直接调用该函数,则直接提交表单
  2. onSubmit,提交按钮点击时先触发,然后触发submit事件。如果不加控制的话,默认返回true,因此表单总能提交。

3 Demo

页面代码:

1 @using (Html.BeginForm(null, null, null, FormMethod.Post, new { onSubmit = "returncheck();" }))  // 注意:此处事件的写法:onsubmit = "return + 事件名()"
2  { 
<input type="text" name="name"> 3 <input type="submit" value="提交"> 4 }

JS代码:

function check(){
    if (document.testform.name.value=="admin")    {        
        alert("姓名不正确");        
        return false;    
        }
    else{
        return true;
        }
}

 

情景二:需要Ajax异步操作

1 使用背景:会议室预定管理系统中,当表单提交的时候需要验证预约的时间是否符合预定规则(需要通过访问服务器数据判断),否则提示错误信息,阻止表单提交。

 2 相关技术点: 

在下面的例子中,通过onsubmit() 方法阻止提交无效的,因为,  JS 中 Ajax 部分与 其他部分是异步进行的,或者说同时进行,代码执行(过程A)1/5行后直接执行23行,与此同时(过程B)6/22行也在进行,显然过程B的执行进度会慢,所以还没有等到判断返回值,A就已经执行完毕,默认Str是true,所以ajax中的判断是无效的。

示例:   Javascript代码:

 1    $("#save").click(function mysubmit() {
 2             var str;
 3             var startime = $("#datetime1").val();
 4             var endtime = $("#datetime2").val();
 5             var num = $("#mark").val();
 6             $.ajax({
 7                 type: "POST",
 8                 url: "/MeettingRoom/meetting",
 9                 data: { strattime: startime, endtime: endtime, num: num },
10                 success: function (sesponseTest) {
11                     if (sesponseTest == "1") {
12                         str = false;                                           
13                         document.getElementById("metend").style.display = "block";
14 
15                     }
16                     else {
17                         str = true;                                          
18                         document.getElementById("metend").style.display = "none";                        
19                     }
20                 }
21 
22             });
23              return str;
24 
25         });   // 

 

<form onsubmit = "return check()"></form>

3 化解方法Demo:

Javascript代码:

 1   <script>
 2         $("#save").click(function mysubmit() {
 3             var str;
 4             var startime = $("#datetime1").val();
 5             var endtime = $("#datetime2").val();
 6             var num = $("#mark").val();
 7             $.ajax({
 8                 type: "POST",
 9                 url: "/MeettingRoom/meetting",
10                 data: { strattime: startime, endtime: endtime, num: num },
11                 success: function (sesponseTest) {
12                     if (sesponseTest == "1") {
13                         str = false;                                           
14                         document.getElementById("metend").style.display = "block";
15                     }
16                     else {
17                         str = true;                                          
18                         document.getElementById("metend").style.display = "none";
19                         $("#form").submit();           // 将提交的进程放在判断过程中,被迫提交操作等待后台访问完毕后执行
20                     }
21                 }
22 
23             });
24 
25         });
26     </script>
  <button class="btn blue" type="button"  id ="save" ><i class="icon-ok"></i>保存</button>

2016/04/12  ------神奇的Javascript。

posted on 2016-04-12 12:41  a-po  阅读(1103)  评论(0编辑  收藏  举报