訪問表單對(duì)象的常用方法：

　　①：根據(jù)<form>元素的id屬性；

　　　　var myform=document.getElementById("myformid"); ?//myformid是某個(gè)<form>元素的ID；

　　②：根據(jù)<form>元素的name屬性；

　　　　var?myform=document.forms["myformname"];?　　//myformname是某個(gè)<form>元素的名稱；

　　③：直接使用表單名訪問表單：

　　　　var myform=document.myformname;　　　　//myformname是某個(gè)<form>元素的名稱；

表單的常用事件：

　　 ?①：onsubmit事件：點(diǎn)擊“提交”按鈕的時(shí)候會(huì)觸發(fā)此事件，并且可能阻止表單提交。例：表單的驗(yàn)證；

　　②：onchange事件：當(dāng)用戶更改內(nèi)容，并且文本框失去焦點(diǎn)的時(shí)候觸發(fā)此事件；

?

例：表單提交

　　前臺(tái)界面：

　　

前臺(tái)界面的代碼：

View Code 1 <form name="myform" action="javascript:alert('注冊(cè)成功！');" method="post" onsubmit="return yanzheng();"> 2 <table width="500px"> 3 4 <tbody> 5 <tr> 6 <td> 7 用戶名： 8 </td> 9 <td> 10 <input name="username" id="username" type="text" /> 11 </td> 12 <td align="left"> 13 <p style="color: #FF0000">*用戶名長度在6-10之間</p> 14 </td> 15 </tr> 16 <tr> 17 <td> 18 密 碼： 19 </td> 20 <td> 21 <input id="password" onchange="passwordleave()" type="password" /> 22 </td> 23 <td align="left"> 24 <p style="color: #FF0000">* 25 <input id="Button1" type="button" value="弱" style="background-color: #FF0000" /> 26 <input id="Button2" type="button" value="中" style="background-color: #FF0000" /> 27 <input id="Button3" type="button" value="強(qiáng)" style="background-color: #FF0000" /> 28 <label id="lavel"></label> 29 </p> 30 </td> 31 </tr> 32 <tr> 33 <td> 34 年 齡： 35 </td> 36 <td> 37 <input id="age" type="text" /> 38 </td> 39 <td align="left"> 40 <p style="color: #FF0000">*</p> 41 </td> 42 </tr> 43 <tr> 44 <td> 45 性 別： 46 </td> 47 <td> 48 <input name="sex" type="radio" value="男" checked="checked" />男 49 <input name="sex" type="radio" value="女"/>女 50 </td> 51 <td align="left"> 52 <p style="color: #FF0000">*</p> 53 </td> 54 </tr> 55 <tr> 56 <td> 57 內(nèi) 容： 58 </td> 59 <td> 60 <input type="checkbox" name="content" value="新聞" />新聞 61 <input type="checkbox" name="content" value="娛樂" />娛樂 62 <input type="checkbox" name="content" value="教育" />教育 63 </td> 64 <td align="left"> 65 <p style="color: #FF0000">*</p> 66 </td> 67 </tr> 68 <tr> 69 <td> 70 學(xué) 歷： 71 </td> 72 <td> 73 <select name="edu_level" style="width: 74px"> 74 <option value="1">小學(xué)</option> 75 <option value="2">中學(xué)</option> 76 <option value="3">大學(xué)</option> 77 <option value="4">大學(xué)以上</option> 78 </select> 79 </td> 80 <td align="left"> 81 <p style="color: #FF0000">*</p> 82 </td> 83 </tr> 84 <tr> 85 <td> 86 愛 好： 87 </td> 88 <td> 89 <select name="like" size="6" multiple="multiple" 90 style="width: 72px; height: 108px"> 91 <option value="1">籃球</option> 92 <option value="2">足球</option> 93 <option value="3">排球</option> 94 <option value="4">跑步</option> 95 <option value="5">登山</option> 96 <option value="6">健美</option> 97 </select> 98 </td> 99 <td align="left"> 100 <p style="color: #FF0000">*</p> 101 </td> 102 </tr> 103 <tr> 104 <td> 105 106 <input id="Button4" type="button" onclick="checkinfo()" value="查看信息" /></td> 107 <td> 108 <input type="submit" name="tijiao" value="注冊(cè)" /> 109 </td> 110 <td> 111 <input type="reset" name="reset" value="重置" /> 112 </td> 113 </tr> 114 </tbody> 115 </table> 116 </form>

JS腳本：

1 <script type="text/javascript"> 2 function yanzheng() { 3 var b; 4 var a = document.getElementById("username"); //獲取用戶名值 5 var p = document.getElementById("password"); //獲取密碼值 6 var age = myform.age.value; //獲取年齡值 7 8 if (a.value.length < 5 || a.value.length > 10) { 9 alert("您輸入的用戶名格式錯(cuò)誤！"); 10 return false; 11 } 12 else if (p.value.length < 5) { 13 alert("密碼長度少于5！"); 14 return false; 15 } 16 else if (!checkage(age)) { 17 return false; 18 } 19 else { 20 return true; 21 } 22 23 } 24 25 function checkage(a) { //檢測(cè)年齡 26 var ch, age; 27 for (var i = 0; i < a.length; i++) { 28 ch = a.charAt(i); 29 if (ch < "0" || ch > "9") { 30 alert("請(qǐng)?jiān)谀挲g選項(xiàng)中輸入數(shù)字！"); 31 return false; 32 } 33 } 34 age = parseInt(a); 35 if (age < 10 || age > 100) { 36 alert("年齡不真實(shí)！"); 37 return false; 38 } 39 return true; 40 41 } 42 43 function checkinfo() { //顯示所有的信息 44 var username = myform.username.value; //獲取用戶名 45 var password = myform.password.value; //獲取密碼 46 var age = myform.age.value; //獲取年齡 47 48 var sex = myform.sex; //獲取性別 49 var osex = ""; //設(shè)置一個(gè)變量獲取性別的選項(xiàng) 50 51 var content = myform.content; //獲取內(nèi)容 52 var ocontent = ""; //設(shè)置一個(gè)變量獲取內(nèi)容的選項(xiàng) 53 54 var eduleave = myform.edu_level; //獲取學(xué)歷 55 var oedu = ""; //設(shè)置一個(gè)變量獲取學(xué)歷的選項(xiàng) 56 57 var intersent = myform.like; //獲取表單愛好 58 var olike = ""; //設(shè)置一個(gè)變量獲取愛好的選項(xiàng) 59 60 for (var i = 0; i < sex.length; i++) { //性別 61 if (sex[i].checked) { 62 osex = sex[i].value; 63 } 64 } 65 66 for (var i = 0; i < content.length; i++) { //內(nèi)容 67 if (content[i].checked) { 68 ocontent += content[i].value + " "; 69 } 70 } 71 72 for (var i = 0; i < eduleave.length; i++) { //學(xué)歷 73 if (eduleave.selectedIndex >= 0) { 74 oedu = eduleave.options[eduleave.selectedIndex].text; 75 } 76 } 77 78 for (var i = 0; i < intersent.length; i++) { //愛好 79 if (intersent.options[i].selected) { 80 olike += intersent.options[i].text + " "; 81 } 82 } 83 84 alert("您的用戶名為：" + username + "\n密碼為：" + password + "\n年齡為：" + age + "\n性別為：" + osex + "\n內(nèi)容為：" + ocontent + "\n學(xué)歷為：" + oedu + "\n興趣愛好為：" + olike); 85 86 } 87 88 89 function passwordleave() { 90 var passwordleavel = myform.password.value; 91 if (passwordleavel.length == "") { 92 document.getElementById("Button1").style.display = "none"; 93 document.getElementById("Button2").style.display = "none"; 94 document.getElementById("Button3").style.display = "none"; 95 } 96 else { 97 if (passwordleavel.length <= "5") { 98 document.getElementById("Button1").style.display = ""; 99 document.getElementById("Button2").style.display = "none"; 100 document.getElementById("Button3").style.display = "none"; 101 } 102 else if (passwordleavel.length <= "10") { 103 document.getElementById("Button1").style.display = ""; 104 document.getElementById("Button2").style.display = ""; 105 document.getElementById("Button3").style.display = "none"; 106 } 107 else { 108 document.getElementById("Button1").style.display = ""; 109 document.getElementById("Button2").style.display = ""; 110 document.getElementById("Button3").style.display = ""; 111 } 112 } 113 } 114 115 function startbody() { 116 document.getElementById("Button1").style.display = "none"; 117 document.getElementById("Button2").style.display = "none"; 118 document.getElementById("Button3").style.display = "none"; 119 } 120 121 </script>

?

這個(gè)案例只是一些常規(guī)的做法，不涉及什么技術(shù)，只是為了下次方便使用。

總結(jié)

以上是生活随笔為你收集整理的【JAVASCRIPT】处理表单事件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。