javascript表单事件处理方法详解
更新时间：2016年05月15日 17:29:21 作者：net小伙
这篇文章主要为大家详细介绍了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 + "\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中逻辑运算符&&和||的返回值问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-04-04
filter是new一个新的array，这篇文章主要介绍了javascipt filter过滤介绍及使用,需要的朋友可以参考下2014-09-09
细说webpack源码之compile流程-rules参数处理技巧(1)
webpack作为一种流行的打包工具被广泛应用在web项目的前端工程化构建中。下面通过本文给大家介绍webpack源码之compile流程-rules参数处理技巧，感兴趣的朋友一起看看吧2017-12-12
最近在写一个问答功能,类似于评论,下面这篇文章主要给大家介绍了关于如何用JS实现回车评论功能的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2023-06-06
这篇文章主要介绍了JavaScript中展开运算符及应用的实例代码,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-01-01
js 求时间差在生活中经常会触及到，本文整理了一些，希望可以帮助有需求的朋友可以,而起还可以实现去掉周六周日这些东东，废话不多说，进入正题2012-12-12
这篇文章主要为大家详细介绍了如何利用JavaScript实现两个跨域页面实现量子纠缠互动效果,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2023-12-12
关于scrollLeft,scrollTop的浏览器兼容性测试
弹窗在谷歌浏览器chrome下的位置跟在别的浏览器下不一样，接下来介绍下scrollLeft,scrollTop的浏览器兼容性，感兴趣的你可以参考下哈2013-03-03
这篇文章主要为大家详细介绍了JavaScript实现前端飞机大战小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-05-05
这篇文章主要介绍了js变量值传到php过程详解 将php解析成数据，传参数去后台，用ajax，或者原生js方式拼接url。明白原理，洞悉系统是先解析php，再执行html代码和js代码。,需要的朋友可以参考下2019-06-06
最新评论