利用JS 阻止表单提交

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

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

2 相关技术点：

form的两个事件

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

3 Demo

页面代码：

1 @using (Html.BeginForm(null, null, null, FormMethod.Post, new { onSubmit = "returncheck();" }))  // 注意：此处事件的写法：onsubmit = "return + 事件名（）"

  { 
     <input type="text" name="name">

   <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代码：

    $("#save").click(function mysubmit() {

             var str;

             var startime = $("#datetime1").val();

             var endtime = $("#datetime2").val();

             var num = $("#mark").val();

             $.ajax({

                 type: "POST",

                 url: "/MeettingRoom/meetting",

                 data: { strattime: startime, endtime: endtime, num: num },

                 success: function (sesponseTest) {

                     if (sesponseTest == "1") {

                         str = false;

                         document.getElementById("metend").style.display = "block";

                     }

                     else {

                         str = true;

                         document.getElementById("metend").style.display = "none";

                     }

                 }

             });

              return str;

         });   // 

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

3 化解方法Demo：

Javascript代码：

   <script>

         $("#save").click(function mysubmit() {

             var str;

             var startime = $("#datetime1").val();

             var endtime = $("#datetime2").val();

             var num = $("#mark").val();

             $.ajax({

                 type: "POST",

                 url: "/MeettingRoom/meetting",

                 data: { strattime: startime, endtime: endtime, num: num },

                 success: function (sesponseTest) {

                     if (sesponseTest == "1") {

                         str = false;

                         document.getElementById("metend").style.display = "block";

                     }

                     else {

                         str = true;

                         document.getElementById("metend").style.display = "none";

                         $("#form").submit();           // 将提交的进程放在判断过程中，被迫提交操作等待后台访问完毕后执行

                     }

                 }

             });

         });

     </script>

  <button class="btn blue" type="button"  id ="save" ><i class="icon-ok"></i>保存</button>

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

利用JS 阻止表单提交的相关教程结束。