原網址：https://blog.csdn.net/vipwxs/article/details/79119701
一、form對象的屬性：
name:獲取表單的名稱，該name一般給JS使用
method：表單的提交方式 （get：不安全，數據量較小，不能上傳附件）（post：相對安全 海量數據 能上傳附件）
action：表單數據的處理程序 一般是PHP文件
enctype：表單數據的編碼方式（加密）
application/x-www-form-urlencoded 默認 multipart/form-data 可以上傳附件
二，表單中通過name找對象：
通過name找對象，必須是document開頭。一般在表單中使用name，其他標簽用id <div>用id
通過name找對象，必須符合三層結構 格式：document.formObj.elementObj
三，事件返回值：
事件的返回值，會影響事件的默認動作
如果事件的返回值為false，則阻止默認動作執行
如果事件的返回值為true或空，則默認動作執行
如果事件沒有任何返回值，則默認動作執行
受影響的事件有兩個：onclick、onsubmit
其它事件的返回值，不會影響默認動作
例如：<form name="form1" method="post" action="login.php" onsubmit="return checkForm()" > </form> <!--這里必須要有"return ",checkForm()函數要有返回值true,false-->
四，表單提交的四種方法:
<form name="form1" method="post" action="login.php" onsubmit="return checkForm()" > </form> checkForm()需要return
<input type="submit" value="提交表單" onclick="return checkForm()" /> checkForm()需要return
<input type="button" value="提交表單" onclick="return checkForm()" /> js中：checkForm(){document.form1.submit();} 不需要return
實例代碼：表單簡單驗證：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>表單簡單驗證</title>
</head>
<body>
<form action="login.php" name="form1" method="post" onsubmit="return checkForm()">
<table width="600" border="1" bordercolor="#ccc" rules="all" align="center" cellpadding="5">
<tr>
<th colspan="3" bgcolor="#0f0f0f">用戶登錄</th>
</tr>
<tr>
<td width="80" align="right">用戶名:</td>
<td><input type="text" name="userName" onfocus="onfocus_userName()" onblur="onblur_userName"/></td>
<td width="350"><div id="result_username"></div></td>
</tr>
<tr>
<td width="80" align="right">用戶密碼:</td>
<td><input type="text" name="userPwd" onfocus="onfocus_userPwd()" onblur="onblur_userPwd"/></td>
<td width="350"><div id="result_userPwd"></div></td>
</tr>
<tr>
<td></td>
<td colspan="2"><input type="submit" value="提交表單"/></td>
</tr>
</table>
</form>
<script type="text/javascript">
/*用戶名*/
//獲取焦點:當光標接入某個文本框時觸發
function onfocus_userName(){
/*獲取id=result_username的元素對象*/
var divObj=document.getElementById("result_username");
/*寫入提示信息*/
divObj.innerHTML="請輸入您的用戶名:";
divObj.style.color="#ccc";
}
//失去焦點:當光標離開某個文本框時觸發
function onblur_userName(){
/*獲取name=userName和id=result_username的元素對象*/
var inputObj=document.form1.userName;
var divObj=document.getElementById("result_username");
/*用戶名驗證*/
if(document.form1.userName.value=""){
divObj.innerHTML="對不起,用戶名不能為空";
divObj.style.color="red";
return false;
}else if(document.form1.userName.value.length<5||document.form1.userName.value.length>20){
divObj.innerHTML="用戶名長度必須介於5-20個字符之間";
divObj.style.color="red";
return false;
}else{
divObj.innerHTML="ok";
return true;
}
}
/*用戶密碼*/
//獲取焦點:當光標接入某個文本框時觸發
function onfocus_userPwd(){
/*獲取id=result_userPwd的元素對象*/
var divObj=document.getElementById("result_userPwd");
/*寫入提示信息*/
divObj.innerHTML="請輸入您的密碼:";
divObj.style.color="#ccc";
}
//失去焦點:當光標離開某個文本框時觸發
function onblur_userPwd(){
/*獲取name=userPwd和id=result_userPwd的元素對象*/
var inputObj=document.form1.userPwd;
var divObj=document.getElementById("result_userPwd");
/*用戶密碼驗證*/
if(document.form1.userPwd.value=""){
divObj.innerHTML="對不起,密碼不能為空";
divObj.style.color="red";
return false;
}else if(document.form1.userPwd.value.length<5||document.form1.userPwd.value.length>20){
divObj.innerHTML="密碼長度必須介於5-20個字符之間！";
divObj.style.color="red";
return false;
}else{
divObj.innerHTML="ok";
return true;
}
}
function checkForm(){
var flag_userName=onblur_userName();
var flag_userPwd=onblur_userPwd();
if(flag_userName&&flag_userPwd){
/*提交表單*/
return true;
}else{
//阻止表單提交
return false;
}
}
</script>
</body>
</html>