访问表单对象的常用方法：
①：根据<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>元素的名称；
表单的常用事件：
①：onsubmit事件：点击“提交”按钮的时候会触发此事件，并且可能阻止表单提交。例：表单的验证；
②：onchange事件：当用户更改内容，并且文本框失去焦点的时候触发此事件；
例：表单提交
前台界面：
前台界面的代码：
View Code
1 <form name="myform" action="javascript:alert('注册成功！');" 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="强" 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 内 容： 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 学 历： 71 </td> 72 <td> 73 <select name="edu_level" style=" 74px"> 74 <option value="1">小学</option> 75 <option value="2">中学</option> 76 <option value="3">大学</option> 77 <option value="4">大学以上</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=" 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="注册" /> 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("您输入的用户名格式错误！"); 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) { //检测年龄 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("请在年龄选项中输入数字！"); 31 return false; 32 } 33 } 34 age = parseInt(a); 35 if (age < 10 || age > 100) { 36 alert("年龄不真实！"); 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 = ""; //设置一个变量获取性别的选项 50 51 var content = myform.content; //获取内容 52 var ocontent = ""; //设置一个变量获取内容的选项 53 54 var eduleave = myform.edu_level; //获取学历 55 var oedu = ""; //设置一个变量获取学历的选项 56 57 var intersent = myform.like; //获取表单爱好 58 var olike = ""; //设置一个变量获取爱好的选项 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++) { //内容 67 if (content[i].checked) { 68 ocontent += content[i].value + " "; 69 } 70 } 71 72 for (var i = 0; i < eduleave.length; i++) { //学历 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内容为：" + ocontent + "\n学历为：" + 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>
这个案例只是一些常规的做法，不涉及什么技术，只是为了下次方便使用。