onSubmit是表單上(也只能是表單)用的,提交表單前會觸發
onClick是按鈕等控件上用的,用來觸發點擊事件.
用作數據驗證的時候,可以選擇在submit按鈕上的onclick中驗證,可以在onsubmit中驗證.但是從事件觸發順序上來說,onclick更早.順序是:
用戶點擊按鈕->onclick->如果onclick返回有效或未處理onclick則提交表單->onsubmit->如果onsubmit未處理或返回true,則提交,否則取消提交.
onsubmit中返回false會引起取消表單提交;onclick中返回false則會引起此次點擊操作被判斷為無效,則也就不會引起表單提交.
第一種：onsubmit
<script language="javascript">
function CheckPost () {
if (addForm.user.value == "") {
alert("請填寫用戶名！");
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="發表留言"/></div>
</form>
<?php
if($_POST['submit']) {
echo "<script language=\"javascript\">alert('提交成功！');history.go(-1);</script>";
}
?>
第二種：onclick
<script language="javascript">
function SendForm () {
if(CheckPost()) {
document.addForm.submit();
}
}
function CheckPost () {
if (addForm.user.value == "") {
alert("請填寫用戶名！");
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">
<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="button" name="submit" value="發表留言" onclick="SendForm();"/></div>
</form>
<?php
if($_POST['submit']) {
echo "<script language=\"javascript\">alert('提交成功！');history.go(-1);</script>";
}
?>