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 相关文章推荐
一款JavaScript压缩工具:X2JSCompactor
Jun 13 Javascript
js 数组实现一个类似ruby的迭代器
Oct 27 Javascript
JS自动缩小超出大小的图片
Oct 12 Javascript
js浮点数精确计算(加、减、乘、除)
Dec 26 Javascript
javascript中setTimeout的问题解决方法
May 08 Javascript
基于jquery实现省市联动特效
Dec 17 Javascript
jquery实现ajax提交表单信息的简单方法(推荐)
Aug 24 Javascript
简单实现bootstrap选项卡效果
Feb 08 Javascript
vue.js动画中的js钩子函数的实现
Jul 06 Javascript
更优雅的微信小程序骨架屏实现详解
Aug 07 Javascript
JavaScript判断数据类型有几种方法及区别介绍
Sep 02 Javascript
Element-ui 自带的两种远程搜索(模糊查询)用法讲解
Jan 29 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设计模式 State (状态模式)
2011/06/26 PHP
PHP-CGI进程CPU 100% 与 file_get_contents 函数的关系分析
2011/08/15 PHP
解析PHP将对象转换成数组的方法(兼容多维数组类型)
2013/06/21 PHP
php文字水印和php图片水印实现代码(二种加水印方法)
2013/12/25 PHP
php三元运算符知识汇总
2015/07/02 PHP
php数值转换时间及时间转换数值用法示例
2017/05/18 PHP
改版了网上的一个js操作userdata
2007/04/27 Javascript
有效的捕获JavaScript焦点的方法小结
2009/10/08 Javascript
javascript innerHTML使用分析
2010/12/03 Javascript
JavaScript设置获取和设置属性的方法
2015/03/04 Javascript
JavaScript获取页面上被选中文字的方法技巧
2015/03/13 Javascript
js实现上一页下一页的效果【附代码】
2016/03/10 Javascript
JS敏感词过滤代码
2016/12/23 Javascript
详解JS中定时器setInterval和setTImeout的this指向问题
2017/01/06 Javascript
jQuery插件HighCharts实现2D柱状图、折线图的组合多轴图效果示例【附demo源码下载】
2017/03/09 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(上)
2017/04/21 Javascript
jQuery EasyUI开发技巧总结
2017/09/26 jQuery
微信小程序实现带参数的分享功能(两种方法)
2019/05/17 Javascript
浅谈vue中组件绑定事件时是否加.native
2019/11/09 Javascript
环形加载进度条封装(Vue插件版和原生js版)
2019/12/04 Javascript
javascript实现页面的实时时钟显示示例
2020/08/06 Javascript
[39:21]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.24
2019/09/10 DOTA
使用C语言来扩展Python程序和Zope服务器的教程
2015/04/14 Python
详解python OpenCV学习笔记之直方图均衡化
2018/02/08 Python
python脚本执行CMD命令并返回结果的例子
2019/08/14 Python
win10安装tesserocr配置 Python使用tesserocr识别字母数字验证码
2020/01/16 Python
使用Keras加载含有自定义层或函数的模型操作
2020/06/10 Python
python UDF 实现对csv批量md5加密操作
2021/01/01 Python
Footshop罗马尼亚:最好的运动鞋选择
2019/09/10 全球购物
英国计算机商店:Technextday
2019/12/28 全球购物
医务人员自我评价
2014/01/26 职场文书
工程招投标邀请书
2014/01/26 职场文书
交通安全教育制度
2014/02/02 职场文书
质量保证书格式
2015/02/27 职场文书
解决python3安装pandas出错的问题
2021/05/20 Python
关于pytest结合csv模块实现csv格式的数据驱动问题
2022/05/30 Python