一、使用普通button按鈕+onclick事件+事件中編寫代碼
<body>
<form id='myform1' name="myform2" action="http://www.baidu.com" method="get">
姓名：<input type="text" name="test" id="uname"/> <span id="msg" style="color: red;"></span><br />
<!--通過js事件：sub()提交表單-->
<input type="button" onclick="sub();" value="提交表單1" />
</form>
<script type="text/javascript">
//使用普通button按鈕+onclick事件+事件中編寫代碼:
function sub(){
//校驗數據合法性
var uname = document.getElementById("uname").value;
if(uname == null || uname.trim() == ""){
//提示用戶用戶名不能為空
document.getElementById("msg").innerHTML = "用戶名不能為空";
return;
}
//手動提交表單
document.getElementById("myform1").submit();
}
</script>
</body>
二、使用submit按鈕 + onclick="return 函數()" + 函數編寫代碼
最后必須返回：return true|false;
<body>
<form id='myform2' name="myform2" action="http://www.baidu.com" method="get">
姓名：<input type="text" name="test" id="uname2"/> <span id="msg2" style="color: red;"></span><br />
<!--通過js事件：sub()提交表單-->
<input type="submit" onclick="return sub2();" value="提交表單2" />
</form>
<script type="text/javascript">
//使用submit按鈕 + onclick="return 函數()" +函數編寫代碼:
function sub2(){
//校驗數據合法性
var uname2 = document.getElementById("uname2").value;
//數據非空判斷
if(uname2 == null || uname2.trim() == ""){
//提示用戶用戶名不能為空
document.getElementById("msg2").innerHTML = "用戶名不能為空";
return false;
}
return true;
}
</script>
</body>
三、使用submit按鈕/圖片提交按鈕 + 表單onsubmit="return 函數();" +函數編寫代碼
最后必須返回：return true|false;
<body>
<form id='myform3' name="myform2" action="http://www.baidu.com" method="get" onsubmit ="return sub3()">
姓名：<input type="text" name="test" id="uname3"/> <span id="msg3" style="color: red;"></span><br />
<!--通過js事件：sub()提交表單-->
<input type="submit" value="提交表單3" />
</form>
<script type="text/javascript">
// 使用submit按鈕/圖片提交按鈕 + 表單onsubmit="return 函數();" +函數編寫代碼:
function sub3(){
//校驗數據合法性
var uname3 = document.getElementById("uname3").value;
//數據非空判斷
if(uname3 == null || uname3.trim() == ""){
//提示用戶用戶名不能為空
document.getElementById("msg3").innerHTML = "用戶名不能為空";
return false;
}
return true;
}
</script>
</body>