使用表單onsubmit屬性進行表單提交前js判定
阿新 • • 發佈:2019-01-05
專案是一個BBS論壇專案,需要在表單進行提交前判定標題是否為空,若為空的話則不允許進行提交。
一般的處理方式為:
<button class="addBtn" onclick="submitForm()">釋出主題</button>
然後在submitForm()函式內部進行提交前的判定,最後進行提交或者輸出提示後不提交。
但是感覺這樣程式碼混雜度更高,使用onsubmit屬性應該會使程式碼更加簡潔。而且也不用手動呼叫submit()方法。
我的表單是這樣的:
如此定義的時候提交前會先進入checkinput()方法,若方法返回false則不提交表單。返回true才會提交表單。<form method="post" action="titles_Add.action" <span style="color:#ff6666;">onsubmit="return checkinput()"</span>>
checkinput()方法如下:
function checkinput(){
var title = document.getElementById("title").value;
if(title == null || title == ''){
alert("標題不能為空");
return false;
}
return true;
}
但是這樣做的話提交必須使用<input>標籤定義提交按鈕,即:
<input class="addBtn" type="submit" value="釋出主題" />
若手動呼叫submit()方法的話,onsubmit阻止提交的作用不會生效,程式會在執行checkinput方法後繼續執行submit()方法進行提交。
比如下面這種提交方式就無法阻止提交,但仍會執行checkinput方法並輸出語句:
<button class="addBtn" onclick="submit()">釋出主題</button>
onsubmit屬性實質上只是定義了表單提交前需要執行的方法。但是當其中加入了return關鍵字之後,即其內部執行結果為return false時,有阻止表單提交的作用,所以才有了此種用法。