本文實例為大家分享了javascript處理表單事件的常用方法，供大家參考，具體內容如下
1、訪問表單對象的常用方法：
①：根據<form>元素的id屬性；
var myform=document.getElementById("myformid"); //myformid是某個<form>元素的ID；
②：根據<form>元素的name屬性；
var myform=document.forms["myformname"]; //myformname是某個<form>元素的名稱；
③：直接使用表單名訪問表單：
var myform=document.myformname; //myformname是某個<form>元素的名稱；
2、表單的常用事件：
①onsubmit事件：點擊“提交”按鈕的時候會觸發此事件，并且可能阻止表單提交。例：表單的驗證；
②onchange事件：當用戶更改內容，并且文本框失去焦點的時候觸發此事件；
例：表單提交
前臺界面：
前臺界面的代碼：
<form name="myform" action="javascript:alert('注冊成功！');" method="post" onsubmit="return yanzheng();"> <table width="500px"> <tbody> <tr> <td> 用戶名： </td> <td> <input name="username" id="username" type="text" /> </td> <td align="left"> <p style="color: #FF0000">*用戶名長度在6-10之間</p> </td> </tr> <tr> <td> 密 碼： </td> <td> <input id="password" onchange="passwordleave()" type="password" /> </td> <td align="left"> <p style="color: #FF0000">* <input id="Button1" type="button" value="弱" style="background-color: #FF0000" /> <input id="Button2" type="button" value="中" style="background-color: #FF0000" /> <input id="Button3" type="button" value="強" style="background-color: #FF0000" /> <label id="lavel"></label> </p> </td> </tr> <tr> <td> 年 齡： </td> <td> <input id="age" type="text" /> </td> <td align="left"> <p style="color: #FF0000">*</p> </td> </tr> <tr> <td> 性 別： </td> <td> <input name="sex" type="radio" value="男" checked="checked" />男 <input name="sex" type="radio" value="女"/>女 </td> <td align="left"> <p style="color: #FF0000">*</p> </td> </tr> <tr> <td> 內 容： </td> <td> <input type="checkbox" name="content" value="新聞" />新聞 <input type="checkbox" name="content" value="娛樂" />娛樂 <input type="checkbox" name="content" value="教育" />教育 </td> <td align="left"> <p style="color: #FF0000">*</p> </td> </tr> <tr> <td> 學 歷： </td> <td> <select name="edu_level" style="width: 74px"> <option value="1">小學</option> <option value="2">中學</option> <option value="3">大學</option> <option value="4">大學以上</option> </select> </td> <td align="left"> <p style="color: #FF0000">*</p> </td> </tr> <tr> <td> 愛 好： </td> <td> <select name="like" size="6" multiple="multiple" style="width: 72px; height: 108px"> <option value="1">籃球</option> <option value="2">足球</option> <option value="3">排球</option> <option value="4">跑步</option> <option value="5">登山</option> <option value="6">健美</option> </select> </td> <td align="left"> <p style="color: #FF0000">*</p> </td> </tr> <tr> <td> <input id="Button4" type="button" onclick="checkinfo()" value="查看信息" /></td> <td> <input type="submit" name="tijiao" value="注冊" /> </td> <td> <input type="reset" name="reset" value="重置" /> </td> </tr> </tbody> </table> </form>JS腳本：
<script type="text/javascript"> function yanzheng() { var b; var a = document.getElementById("username"); //獲取用戶名值 var p = document.getElementById("password"); //獲取密碼值 var age = myform.age.value; //獲取年齡值 if (a.value.length < 5 || a.value.length > 10) { alert("您輸入的用戶名格式錯誤！"); return false; } else if (p.value.length < 5) { alert("密碼長度少于5！"); return false; } else if (!checkage(age)) { return false; } else { return true; } } function checkage(a) { //檢測年齡 var ch, age; for (var i = 0; i < a.length; i++) { ch = a.charAt(i); if (ch < "0" || ch > "9") { alert("請在年齡選項中輸入數字！"); return false; } } age = parseInt(a); if (age < 10 || age > 100) { alert("年齡不真實！"); return false; } return true; } function checkinfo() { //顯示所有的信息 var username = myform.username.value; //獲取用戶名 var password = myform.password.value; //獲取密碼 var age = myform.age.value; //獲取年齡 var sex = myform.sex; //獲取性別 var osex = ""; //設置一個變量獲取性別的選項 var content = myform.content; //獲取內容 var ocontent = ""; //設置一個變量獲取內容的選項 var eduleave = myform.edu_level; //獲取學歷 var oedu = ""; //設置一個變量獲取學歷的選項 var intersent = myform.like; //獲取表單愛好 var olike = ""; //設置一個變量獲取愛好的選項 for (var i = 0; i < sex.length; i++) { //性別 if (sex[i].checked) { osex = sex[i].value; } } for (var i = 0; i < content.length; i++) { //內容 if (content[i].checked) { ocontent += content[i].value + " "; } } for (var i = 0; i < eduleave.length; i++) { //學歷 if (eduleave.selectedIndex >= 0) { oedu = eduleave.options[eduleave.selectedIndex].text; } } for (var i = 0; i < intersent.length; i++) { //愛好 if (intersent.options[i].selected) { olike += intersent.options[i].text + " "; } } alert("您的用戶名為：" + username + "/n密碼為：" + password + "/n年齡為：" + age + "/n性別為：" + osex + "/n內容為：" + ocontent + "/n學歷為：" + oedu + "/n興趣愛好為：" + olike); } function passwordleave() { var passwordleavel = myform.password.value; if (passwordleavel.length == "") { document.getElementById("Button1").style.display = "none"; document.getElementById("Button2").style.display = "none"; document.getElementById("Button3").style.display = "none"; } else { if (passwordleavel.length <= "5") { document.getElementById("Button1").style.display = ""; document.getElementById("Button2").style.display = "none"; document.getElementById("Button3").style.display = "none"; } else if (passwordleavel.length <= "10") { document.getElementById("Button1").style.display = ""; document.getElementById("Button2").style.display = ""; document.getElementById("Button3").style.display = "none"; } else { document.getElementById("Button1").style.display = ""; document.getElementById("Button2").style.display = ""; document.getElementById("Button3").style.display = ""; } } } function startbody() { document.getElementById("Button1").style.display = "none"; document.getElementById("Button2").style.display = "none"; document.getElementById("Button3").style.display = "none"; } </script> 這個案例只是一些常規的做法，不涉及什么技術，只是為了下次方便使用。
以上就是本文的全部內容，希望對大家學習javascript程序設計有所幫助。
新聞熱點
疑難解答
