javascript表单事件处理方法详解

本文实例为大家分享了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 + "
密码为：" + password + "
年龄为：" + age + "
性别为：" + osex + "
内容为：" + ocontent + "
学历为：" + oedu + "
兴趣爱好为：" + 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程序设计有所帮助。