javascript表单事件处理方法详解


Posted in Javascript onMay 15, 2016

本文实例为大家分享了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事件:当用户更改内容,并且文本框失去焦点的时候触发此事件; 

例:表单提交

前台界面:

javascript表单事件处理方法详解

前台界面的代码:

<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 相关文章推荐
IE6-IE9不支持table.innerHTML的解决方法分享
Sep 14 Javascript
深入浅出ES6之let和const命令
Aug 25 Javascript
浅谈js常用内置方法和对象
Sep 24 Javascript
微信小程序开发之录音机 音频播放 动画实例 (真机可用)
Dec 08 Javascript
vue.js+Element实现表格里的增删改查
Jan 18 Javascript
基于Bootstrap的网页设计实例
Mar 01 Javascript
详解使用vue-router进行页面切换时滚动条位置与滚动监听事件
Mar 08 Javascript
elementUI select组件value值注意事项详解
May 29 Javascript
vue+element 模态框表格形式的可编辑表单实现
Jun 07 Javascript
微信小程序 数据缓存实现方法详解
Aug 26 Javascript
vue子组件改变父组件传递的prop值通过sync实现数据双向绑定(DEMO)
Feb 01 Javascript
AJAX实现指定部分页面刷新效果
Oct 16 Javascript
基于jquery实现ajax无刷新评论
Aug 19 #Javascript
JavaScript代码性能优化总结篇
May 15 #Javascript
window.onload绑定多个事件的两种解决方案
May 15 #Javascript
js仿淘宝和百度文库的评分功能
May 15 #Javascript
RequireJS使用注意细节
May 15 #Javascript
JSON 的正确用法探讨:Pyhong、MongoDB、JavaScript与Ajax
May 15 #Javascript
jQuery插件开发汇总
May 15 #Javascript
You might like
PHP中获取变量的变量名的一段代码的bug分析
2011/07/07 PHP
PHP获取数组最后一个值的2种方法
2015/01/21 PHP
PHP接收json 并将接收数据插入数据库的实现代码
2015/12/01 PHP
Laravel中注册Facades的步骤详解
2016/03/16 PHP
基于php实现的php代码加密解密类完整实例
2016/10/12 PHP
PHP多进程简单实例小结
2019/11/09 PHP
JavaScript中void(0)的具体含义解释
2007/02/27 Javascript
JavaScript 打地鼠游戏代码说明
2010/10/12 Javascript
js图片延迟加载的实现方法及思路
2013/07/22 Javascript
jsp网页搜索结果中实现选中一行使其高亮
2014/02/17 Javascript
js QQ客服悬浮效果实现代码
2014/12/12 Javascript
使用jquery 简单实现下拉菜单
2015/01/14 Javascript
jQuery实现MSN中文网滑动Tab菜单效果代码
2015/09/09 Javascript
使用Node.js实现ORM的一种思路详解(图文)
2017/10/24 Javascript
jQuery+css last-child实现选择最后一个子元素操作示例
2018/12/10 jQuery
js 实现 list转换成tree的方法示例(数组到树)
2019/08/18 Javascript
TypeScript之调用栈的实现
2019/12/31 Javascript
浅析JavaScript 函数柯里化
2020/09/08 Javascript
对Python中9种生成新对象的方法总结
2018/05/23 Python
opencv python 图像去噪的实现方法
2018/08/31 Python
Python实现简易过滤删除数字的方法小结
2019/01/09 Python
对python借助百度云API对评论进行观点抽取的方法详解
2019/02/21 Python
Python实现字符串匹配的KMP算法
2019/04/04 Python
python图形用户接口实例详解
2019/12/16 Python
新年福利来一波之Python轻松集齐五福(demo)
2020/01/20 Python
django 实现手动存储文件到model的FileField
2020/03/30 Python
pycharm-professional-2020.1下载与激活的教程
2020/09/21 Python
canvas绘制圆角头像的实现方法
2019/01/17 HTML / CSS
美国汽车性能部件和赛车零件网站:Vivid Racing
2018/03/27 全球购物
理工大学毕业生自荐信
2013/11/01 职场文书
思想专业自荐信范文
2013/12/25 职场文书
母亲80寿诞答谢词
2014/01/16 职场文书
管理学院毕业生自荐信范文
2014/03/10 职场文书
离婚协议书包括哪些内容
2014/10/16 职场文书
大学生暑期实践报告之企业经营管理
2019/08/08 职场文书
Python基础之函数嵌套知识总结
2021/05/23 Python