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 相关文章推荐
JQuery CSS样式控制 学习笔记
Jul 23 Javascript
Javascript跨域请求的4种解决方式
Mar 17 Javascript
在javascript中关于节点内容加强
Apr 11 Javascript
JS+CSS实现一个气泡提示框
Aug 18 Javascript
javascript避免数字计算精度误差的方法详解
Mar 05 Javascript
JavaScript跨域方法汇总
Oct 16 Javascript
jQuery中replaceWith()方法用法实例
Dec 25 Javascript
JS实现仿微博可关闭弹出层效果
Sep 21 Javascript
jQuery on()方法绑定动态元素的点击事件实例代码浅析
Jun 16 Javascript
jquery.tableSort.js表格排序插件使用方法详解
Aug 12 Javascript
ionic实现下拉刷新载入数据功能
May 11 Javascript
微信小程序左滑动显示菜单功能的实现
Jun 14 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通过header实现文本文件下载的代码
2010/08/08 PHP
PHP动态生成javascript文件的2个例子
2014/04/11 PHP
thinkphp微信开发(消息加密解密)
2015/12/02 PHP
Linux下源码包安装Swoole及基本使用操作图文详解
2019/04/02 PHP
javascript实现仿银行密码输入框效果的代码
2007/12/13 Javascript
js继承 Base类的源码解析
2008/12/30 Javascript
javascript onmouseout 解决办法
2010/07/17 Javascript
一个简单的瀑布流效果(主体形式自写)
2013/05/27 Javascript
JavaScript中的闭包介绍
2015/03/15 Javascript
JavaScript 事件入门知识
2015/04/13 Javascript
Node.js使用NodeMailer发送邮件实例代码
2017/03/06 Javascript
js读取json文件片段中的数据实例
2017/03/09 Javascript
Vue动态实现评分效果
2017/05/24 Javascript
Vue.js在数组中插入重复数据的实现代码
2017/11/17 Javascript
node+vue实现文件上传功能
2020/05/28 Javascript
Jquery Fade用法详解
2020/11/06 jQuery
Python中文竖排显示的方法
2015/07/28 Python
在Python程序和Flask框架中使用SQLAlchemy的教程
2016/06/06 Python
Python3 导入上级目录中的模块实例
2019/02/16 Python
PyQt4 treewidget 选择改变颜色,并设置可编辑的方法
2019/06/17 Python
linux中如何使用python3获取ip地址
2019/07/15 Python
Django使用中间键实现csrf认证详解
2019/07/22 Python
tensorflow之并行读入数据详解
2020/02/05 Python
python如何将两张图片生成为全景图片
2020/03/05 Python
奇怪的鱼:Weird Fish
2018/03/18 全球购物
Farfetch阿联酋:奢侈品牌时尚购物平台
2019/07/26 全球购物
澳大利亚顶级美发和美容贸易超市:glamaCo
2020/01/19 全球购物
Spotahome意大利:公寓和房间出租
2020/02/21 全球购物
Oral-B荷兰:牙医最推荐的品牌
2020/02/25 全球购物
写给女朋友的检讨书
2014/01/28 职场文书
祖国在我心中演讲稿450字
2014/09/05 职场文书
总经理助理岗位职责
2015/01/31 职场文书
2015年班主任德育工作总结
2015/05/21 职场文书
golang如何去除多余空白字符(含制表符)
2021/04/25 Golang
只用40行Python代码就能写出pdf转word小工具
2021/05/31 Python
Spring依赖注入多种类型数据的示例代码
2022/03/31 Java/Android