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 相关文章推荐
Prototype Hash对象 学习
Jul 19 Javascript
JAVASCRIPT车架号识别/验证函数代码 汽车车架号验证程序
Jan 08 Javascript
js实现一个省市区三级联动选择框代码分享
Mar 06 Javascript
文字溢出实现溢出的部分再放入一个新生成的div中具体代码
May 17 Javascript
解析js原生方法创建表格效率测试
Jul 08 Javascript
JS比较2个日期间隔的示例代码
Apr 15 Javascript
微信小程序 Video API实例详解
Oct 02 Javascript
javascript中Number的方法小结
Nov 21 Javascript
基于vue 动态加载图片src的解决方法
Feb 05 Javascript
swiper Scrollbar滚动条组件详解
Sep 08 Javascript
使用layui监听器监听select下拉框,事件绑定不成功的解决方法
Sep 28 Javascript
实例分析javascript中的异步
Jun 02 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
用Socket发送电子邮件
2006/10/09 PHP
table标签的结构与合并单元格的实现方法
2013/07/24 PHP
php中动态调用函数的方法
2015/03/16 PHP
TFDN图片播放器 不错自动播放
2006/10/03 Javascript
ASP Json Parser修正版
2009/12/06 Javascript
cument.execCommand()用法深入理解
2012/12/04 Javascript
jQuery实现切换字体大小的方法
2015/03/10 Javascript
JS实现控制表格内指定单元格内容对齐的方法
2015/03/30 Javascript
jQuery实现带幻灯的tab滑动切换风格菜单代码
2015/08/27 Javascript
基于jQuery仿淘宝产品图片放大镜代码分享
2020/06/23 Javascript
JS验证逗号隔开可以是中文字母数字
2016/04/22 Javascript
javascript鼠标跟随运动3种效果(眼球效果,苹果菜单,方向跟随)
2016/10/27 Javascript
js事件委托和事件代理案例分享
2017/07/25 Javascript
vue 挂载路由到头部导航的方法
2017/11/13 Javascript
详解Vue 全局引入bass.scss 处理方案
2018/03/26 Javascript
详解Vue基于 Nuxt.js 实现服务端渲染(SSR)
2018/04/05 Javascript
jQuery表单元素过滤选择器用法实例分析
2019/02/20 jQuery
你准备好迎接vue3.0了吗
2020/04/28 Javascript
python在windows命令行下输出彩色文字的方法
2015/03/19 Python
Python合并两个字典的常用方法与效率比较
2015/06/17 Python
Python yield 使用方法浅析
2017/05/20 Python
详解Python函数可变参数定义及其参数传递方式
2017/08/02 Python
11月编程语言排行榜 Python逆袭C#上升到第4
2017/11/15 Python
Python数据类型中的“冒号“[::]——分片与步长操作示例
2018/01/24 Python
python 堆和优先队列的使用详解
2019/03/05 Python
详解mac python+selenium+Chrome 简单案例
2019/11/08 Python
Pycharm在指定目录下生成文件和删除文件的实现
2020/12/28 Python
python爬取股票最新数据并用excel绘制树状图的示例
2021/03/01 Python
如何避免常见的6种HTML5错误用法
2017/11/06 HTML / CSS
如何让pre和textarea等HTML元素去掉滚动条自动换行自适应文本内容高度
2019/08/01 HTML / CSS
北美Newegg打造的全球尖货海购平台:tt海购
2018/09/28 全球购物
给客户的感谢信
2015/01/21 职场文书
辞职信怎么写?
2019/05/21 职场文书
为什么说餐饮很难做,是因为你不了解这些新规则
2019/08/20 职场文书
想创业成功,需要掌握这些要点
2019/12/06 职场文书
MySQL数据管理操作示例讲解
2022/12/24 MySQL