铁雪资源网 Design By www.gsvan.com
本文实例为大家分享了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 + "\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程序设计有所帮助。
标签:
js,表单,事件
铁雪资源网 Design By www.gsvan.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
铁雪资源网 Design By www.gsvan.com
暂无javascript表单事件处理方法详解的评论...