onsubmit只能表單上使用,提交表單前會觸發(fā), onclick是按鈕等控件使用, 用來觸發(fā)點擊事件。
在提交表單前,一般都會進行數(shù)據驗證,可以選擇在submit按鈕上的onclick中驗證,也可以在onsubmit中驗證。
但是onclick比onsubmit更早的被觸發(fā)。
提交過程
1、用戶點擊按鈕 ---->
2、觸發(fā)onclick事件 ---->
3、onclick返回true或未處理onclick ---->
4、觸發(fā)onsubmit事件 ---->
5、onsubmit未處理或返回true ------>
6、提交表單.
onsubmit處理函數(shù)返回false,onclick函數(shù)返回false,都不會引起表單提交。
<script language="javascript"> function CheckPost () { if (addForm.user.value == "") { alert("請?zhí)顚懹脩裘?/span>"); addForm.username.focus(); return false; } if (addForm.title.value.length < 5) { alert("標題不能少于5個字符!"); addForm.title.focus(); return false; } return true; }</script><form action="test.php" method="post" name="addForm" onsubmit="return CheckPost();"> <div>用戶:<input type="text" size="10" name="user" maxlength="20"/></div> <div>標題:<input type="text" name="title" maxlength="50"/></div> <div>內容:<textarea name="content" rows="8" cols="30"></textarea></div> <div> <input type="submit" name="submit" value="發(fā)表留言"/> </div></form>
1 <script language="javascript"> 2 function SendForm () 3 { 4 if(CheckPost()) 5 { 6 document.addForm.submit(); 7 } 8 } 9 10 function CheckPost () 11 {12 if (addForm.user.value == "") 13 {14 alert("請?zhí)顚懹脩裘?/span>");15 addForm.username.focus();16 return false;17 }18 if (addForm.title.value.length < 5) 19 {20 alert("標題不能少于5個字符!");21 addForm.title.focus();22 return false;23 }24 return true;25 }26 </script>27 28 <form action="test.php" method="post" name="addForm">29 <div>用戶:<input type="text" size="10" name="user" maxlength="20"/></div>30 <div>標題:<input type="text" name="title" maxlength="50"/></div>31 <div>內容:<textarea name="content" rows="8" cols="30"></textarea></div>32 <div><input type="button" name="submit" value="發(fā)表留言" onclick="SendForm();"/></div>33 </form>