本文实例为大家分享了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>*用户名长度在6-10之间</p> </td> </tr> <tr> <td> 密 码： </td> <td> <input id="password" onchange="passwordleave()" type="password" /> </td> <td align="left"> <p>* <input id="Button1" type="button" value="弱" /> <input id="Button2" type="button" value="中" /> <input id="Button3" type="button" value="强" /> <label id="lavel"></label> </p> </td> </tr> <tr> <td> 年 龄： </td> <td> <input id="age" type="text" /> </td> <td align="left"> <p>*</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>*</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>*</p> </td> </tr> <tr> <td> 学 历： </td> <td> <select name="edu_level"> <option value="1">小学</option> <option value="2">中学</option> <option value="3">大学</option> <option value="4">大学以上</option> </select> </td> <td align="left"> <p>*</p> </td> </tr> <tr> <td> 爱 好： </td> <td> <select name="like" 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 align="left"> <p>*</p> </td> </tr> <tr> <td> <input id="Button4" type="button" 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程序设计有所帮助。
【javascript表单事件处理方法详解】相关文章：
★ javascript实现设置、获取和删除Cookie的方法