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 action="javascript:alert('注册成功！');" method="post" onsubmit="return yanzheng();"> <table> <tbody> <tr> <td> 用户名： </td> <td> <input type="text" /> </td> <td> <p>*用户名长度在6-10之间</p> </td> </tr> <tr> <td> 密 码： </td> <td> <input onchange="passwordleave()" type="password" /> </td> <td> <p>* <input type="button" value="弱" /> <input type="button" value="中" /> <input type="button" value="强" /> <label></label> </p> </td> </tr> <tr> <td> 年 龄： </td> <td> <input type="text" /> </td> <td> <p>*</p> </td> </tr> <tr> <td> 性 别： </td> <td> <input type="radio" value="男" checked="checked" />男 <input type="radio" value="女"/>女 </td> <td> <p>*</p> </td> </tr> <tr> <td> 内 容： </td> <td> <input type="checkbox" value="新闻" />新闻 <input type="checkbox" value="娱乐" />娱乐 <input type="checkbox" value="教育" />教育 </td> <td> <p>*</p> </td> </tr> <tr> <td> 学 历： </td> <td> <select> <option value="1">小学</option> <option value="2">中学</option> <option value="3">大学</option> <option value="4">大学以上</option> </select> </td> <td> <p>*</p> </td> </tr> <tr> <td> 爱 好： </td> <td> <select size="6" multiple="multiple"> <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> <p>*</p> </td> </tr> <tr> <td> <input type="button" value="查看信息" /></td> <td> <input type="submit" value="注册" /> </td> <td> <input type="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>

这个案例只是一些常规的做法，不涉及什么技术，只是为了下次方便使用。