阻止表單提交的預設行為 return false
阿新 • • 發佈：2019-01-09
今天在修改公司的登陸頁面時發現關於阻止表單提交問題，如下程式碼片段
我的目的是在checkUkey()方法進行判斷，如果flag返回true，則提交，返回false，則不提交。但是卻發現在return false後，並不能阻止表單提交，網上搜查了下資料，發現是，checkUkey方法返回的false並沒有傳遞給form，因此並不能阻止表單的預設動作。在提交按鈕中加上下面語句即可。<form name="loginForm" action="login!userLogin.action" method="post"> <p class="title">LOGIN</p> <div>使用者名稱：</div> <div> <input type="text" class="w230" id="loginName" name="user.loginName" autocomplete="off" maxlength="20" placeholder="使用者名稱"/> </div> <div>密碼：</div> <div> <input type="password" class="w230" id="pwd" name="user.password" placeholder="密碼"> </div> <div>驗證碼：</div> <div> <input type="text" class="w160" id="checkCode" placeholder="請輸入右側驗證碼" name="user.checkCode" autocomplete="off" maxlength="4" value="請輸入驗證碼"/> <img src="<%=request.getContextPath()%>/authcode" id="authcode" width="47" height="20" class="v_m"/> </div> <button class="btn-primary" onclick="checkUkey();return false;">登入</button> </form> function submitForm(){ var result = true; var loginName = document.getElementById("loginName"); var pwd = document.getElementById("pwd"); var checkCode = document.getElementById("checkCode"); var msg=""; if (loginName.value==""){ msg = "使用者名稱不能為空"; result = false; } if (pwd.value==""){ msg = msg + "\n密碼不能為空"; result = false; } if (checkCode && checkCode.value==""){ msg = msg + "\n驗證碼不能為空"; result = false; } if (result) { if($('#cookieNameAndPwd').attr('checked')){ $.cookie('loginname', loginName.value, {expires:30}); $.cookie('password', pwd.value, {expires:30}); }else{ $.cookie('loginname', null); $.cookie('password', null); } } if (msg!=""){ alert(msg); } return result; } function checkUkey(){ var flag=submitForm(); if(flag){ document.loginForm.submit(); }else{ return false;}
<button class="btn-primary" onclick="checkUkey();return false;">登入</button>
或者在表單form中 加上 onsubmit="return false;"
摘自網路文章：
<form action="index.jsp" method="post" onsubmit="submitTest();"> <INPUT value="www"> <input type="submit" value="submit"> </form> <SCRIPT LANGUAGE="JavaScript"> <!-- function submitTest() { // 一些邏輯判斷return false; } //--></SCRIPT>
點選submit按鈕該表單並未提交。因為有一處應該改為下列程式碼 ：
<form action="index.jsp" method="post" onsubmit="return submitTest();">
原來onsubmit屬性就像是<form>這個html物件的一個方法名，其值（一字串）就是其方法體，預設返回true；
和Java一樣，在該方法體中你可以寫任意多個語句，包括內建函式和自定義函式。
在這裡submitTest()雖然返回false，但我們只執行了此函式，沒有對其結果進行任何處理。
而onsubmit="return submitTest()利用到了它的返回值，達到了預期效果。
事件處理函式返回false的問題，在大多數情況下,為事件處理函式返回false,可以防止預設的事件行為。
例如,預設情況下點選一個<a>元素,頁面會跳轉到該元素href屬性指定的頁. Return False 就相當於終止符，Return True 就相當於執行符。
在js中return false的作用一般是用來取消預設動作的。比如你單擊一個連結除了觸發你的 onclick時間（如果你指定的話）以外還要觸發一個預設事件就是執行頁面的跳轉。
所以如果 你想取消物件的預設動作就可以return false。
return false應用比較多的場合有：
<body> 1，<a href="/" mce_href="/" onclick='test();'>超級連結 </a> 2，<input type="button" onclick='test()' value="提交"> 3，<form name="form1" onsubmIT="return test();"> 內容 <input type="submit" value="提交"></form> </body>
<input type="submit" onclick="submitAction(); return false;" /> submitAction 方法裡面有提交表單的動作。
如果不加 return false，在執行完 submitAction 之後，submit 按鈕還會繼續執行它的預設事件，就會再次提交表單。
這可能就是很多錯誤的根源。的確，return false的含義不是阻止事件繼續向頂層元素傳播，而是阻止瀏覽器對事件的預設處理。你可以這樣試驗：首先將所有的js指令碼註釋掉，在IE瀏覽器中嘗試拖動一下圖片，你會發現滑鼠會成為禁止操作的樣式，圖片是被禁止拖動的，它是瀏覽器針對mousemove事件所提供的預設行為。
return false就是為了去掉這種行為，否則就會出現你描述的中斷事件連續執行。 另外，和return false等效的語句為：
window.event.returnValue = false，
你可以把return false替換為此語句並進行驗證。 最後說明一下，此種方式只適用於IE瀏覽器。
在js中return false的作用一般是用來取消預設動作的。比如你單擊一個連結除了觸發你的 onclick時間（如果你指定的話）以外還要觸發一個預設事件就是執行頁面的跳轉。
所以如果 你想取消物件的預設動作就可以return false。return false應用比較多的場合有：
<form name="form1" onsubmit="return youfunction();">...... </form> <a href="www.***.com" onclick="...;return false;">dddd </a>