利用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 + 事件名()" 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。