JavaScript第九讲：JavaScript表单对象

最新推荐文章于 2022-01-26 19:31:58 发布
最新推荐文章于 2022-01-26 19:31:58 发布
阅读量393 收藏
点赞数
分类专栏： JavaScript教程 文章标签： js javascript web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/phpzt/article/details/106450691
版权
本文详细介绍了JavaScript中处理表单的对象和方法，包括getElementById、forms属性、表单属性如action、method、enctype、title，以及各种事件处理如focus、blur、onchange和onsubmit。通过多个实例演示了如何在表单中设置初始焦点、更改表单提交地址、验证必填字段等操作，帮助读者掌握JavaScript与HTML表单交互的技巧。
摘要由CSDN通过智能技术生成

本节主要讲解JavaScript表单对象，以下是具体详细实例。

 

表单对象：

   document.getElementById();

   document.forms.username

   document.frm1.username

  本身表单的属性，都可以使对象的属性

   action 

   method

   enctype

   title 

   submit()

   focus()//获取焦点时触发的事件

   blur();//失去焦点

   onchange//内容改变触发的事件

 在form上有一个事件onsubmit（）

例1

<body  οnlοad="document.getElementById('login-form').username.focus()">

载入页面时登陆页面的username自动获取焦点

 

例2

<body>

  <form name="frm"  action="login.php" method="post">

     username:<input type="text" name="username" value=""><br>

    password:<input type="password" name="password" value=""><br>

    <input  type="submit" name="submit2" value="Login"><br>

</form>

  <h1 οnclick="test()">login h1</h1>

</body>

<script>

function test(){

var frmobj=document.frm;

frmobj.action="index.php";

frmobj.target="_blank";

frmobj.method="get";

frmobj.submit();//调用这个方法就能提交，注意input的名字叫submit不能与内置的submit（）方法重。非常容易出错

}

setTiemout("test()",10000);

</script>

 

 

例3  //不能为空

<body>

  <form name="frm"  action="login.php" οnsubmit="return check()" method="post">

       username:<input type="text" name="username" value=""><br>

       password:<input type="password" name="password" value=""><br>

                      <input  type="submit" name="submit2" value="Login"><br>

</form>

</body>

<script>

    function  check(){

       if(document.frm.username.value==''){

       alert('用户名不能为空');

       return false;

     }

    if(document.frm.password.value==""){

      alert('密码不能为空');

     return false;

    }

     return true;

  }

</script>

 

例4  //不能为空后返回获取焦点

<body>

  <form name="frm"  action="login.php" οnsubmit="return check()" method="post">

       username:<input type="text" name="username" value=""><br>

       password:<input type="password" name="password" value=""><br>

                      <input  type="submit" name="submit2" value="Login"><br>

</form>

</body>

<script>

    function  check(){

       var info="";

       var stats=true;

       if(!document.frm.username.value.match(/^\s+$/)){  //正则,不能输入空格

        info+="用户名不能为空！\n";

       // document.frm.username.focus();

        stats=false;

     }

    if(document.frm.password.value==""){

       info+="密码不能为空 \n";

     // document.frm.password.focus();

      stats=false;

    }

   if(!stats)

         alert(info);

     return  stats;

  }

</script>

 

例5

<body>

  <form name="frm"  action="login.php" οnsubmit="return check()" method="post">

       username:<input type="text" name="username" οnblur="one()"  value=""><br>

       password:<input type="password" name="password"  οnblur="two()" value=""><br>

                      <input  type="submit" name="submit2" value="Login"><br>

</form>

</body>

<script>

  function one(){

     if(!document.frm.username.value.match(/^\s+$/)){

       alert("用户名不能为空");

      //document.frm.username.focus();

   }

 }

 

function two(){

   if(!document.frm.password.value==""){

      alert("用户密码不能为空");

     //  document.frm.password.focus();

      }

 }

    function  check(){

       var info="";

       var stats=true;

       if(!document.frm.username.value.match(/^\s+$/)){  //正则,不能输入空格

        info+="用户名不能为空！\n";

       // document.frm.username.focus();

        stats=false;

     }

    if(document.frm.password.value==""){

       info+="密码不能为空 \n";

     // document.frm.password.focus();

      stats=false;

    }

   if(!stats)

         alert(info);

     return  stats;

  }

</script>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

sky根
关注
专栏目录
javascript表单对象
u010716763的专栏
04-16 1129
表单对象主要包括一下对象:Text单行文本框
javascript-Bivio:支持 perl-Bivio 的第 3 方 javascript 库
06-30
JavaScript-Bivio 是一个专为 Perl-Bivio 设计的第三方 JavaScript 库，它旨在增强和扩展 Perl-Bivio 在 Web 开发中的功能。Perl-Bivio 是一个强大的框架，通常用于构建数据处理和分析应用，而 JavaScript-Bivio 则...
JavaScript-表单对象
xmosang的博客
01-26 790
form标签本质上也是一个DOM对象 9.1、获取表单元素 表单的主要目的是提交信息 <form> 用户名：<input type="text" id="username"><br/> 性别：<input type="radio" name="sex" value="男" id="boy">男<input type="radio" name ="sex" value="女" id="girl">女 </form> &l
Javascript操作form表单对象
qq_43527694的博客
07-18 212
1、文本框 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <input id="name" /> <script> document.getElementById("name").focus();//打开页面光标自动聚焦在框中
JavaScript表单对象Form介绍
热门推荐
王伟峰
04-03 1万+
<br />原文地址：http://www.pczpg.com/a/2010/0312/3106_2.html<br /> <br />要实现动态交互，必须掌握有关表单对象(Form)和框架对象(Frames)更为复杂的知识。<br />1、 表单基础知识<br />表单是最常见的与JavaScript一起使用的HTML元素之一。在网页中用表单来收集从用户那里得到的信息，并且 <br />将这些信息传输给服务器来处理。表单主要有两类应用：一是如订单、个人资料、调查信息等；二是搜索引擎<br />功能，即从
JS表单对象
m0_51984899的博客
12-23 505
JS表单对象 表单是页面向后端传输数据的一个非常常见的方式,因此在发送请求之前,我们在页面进行一些校验,不仅可以节省不必要的错误传输,也可以提高用户的体验. 获取表单 <form id='myform' name="myform" action="" method="post"></form> <form id='myform2' name="myform2" action="" method="post"></form> 1>、document.
javascript asp教程第十二课---session对象
10-31
### JavaScript ASP教程第十二课---Session对象详解 在本篇教程中，我们将深入探讨ASP（Active Server Pages）中的Session对象及其应用。Session对象是ASP的一个关键特性，它允许开发者跟踪单个用户在多个页面间的...
Javascript简介：Alura-JavaScript：网络编程和语言
02-18
JavaScript的主要用途包括网页交互、动态内容更新、表单验证、AJAX（异步JavaScript和XML）请求，以及如今流行的单页应用程序（SPA）开发。 1. **基础语法**：JavaScript是一种弱类型、解释型的语言，支持函数式、...
common-javascript-projects：常见JavaScript项目
02-24
JavaScript支持函数式、面向对象和命令式等多种编程范式，这使得它非常灵活。 在"common-javascript-projects"中，我们可能会遇到以下几种常见的JavaScript项目： 1. **计时器和倒计时**：这是JavaScript最基础的...
JavaScript语言与Ajax应用第二版_JavaScript语言与Ajax应用_JavaScript应用_javascri
10-01
9. **jQuery与Ajax**：jQuery是一个流行的JavaScript库，简化了DOM操作和Ajax请求。书中可能涵盖如何利用jQuery简化Ajax调用，提高开发效率。 10. **现代Web API与Fetch API**：随着Web技术的发展，XMLHttpRequest...
JavaScript 表单对象 | 看完不会请来捶我
lesileqin的博客
01-12 8491
文章目录一、访问表单与表单元素1、JavaScript访问表单2、JavaScript访问表单元素二、表单对象的属性、方法与事件1、属性2、方法3、事件三、表单元素1、文本框（1）文本框属性（2）文本框方法（3）例子1：验证表单内容是否为空（4）例子2：对文本框的文字加入字数限制2、按钮（1）按钮属性（2）按钮方法出去一下，虽然没人看，但我还要加一句：未完待续！！！！！（3）例子：获取表单元素的值...
JavaScript form对象，表单简单验证
Vipwxs的博客
01-21 1353
一、form对象的属性： name:获取表单的名称，该name一般给JS使用 method：表单的提交方式   （get：不安全，数据量较小，不能上传附件）（post：相对安全 海量数据 能上传附件） action：表单数据的处理程序 一般是PHP文件 enctype：表单数据的编码方式（加密） application/x-www-form-urlencoded  默认  
javascript表单、DOM对象
weixin_47470679的博客
06-27 104
3种实现方式： 1 2submit form 3 只要表单存在以上任何一种按钮且获得焦点时都可以通过回车提交表单，（textarea会换行），即触发submit事件，可在其中验证表单，或阻止提交，利用e.preventDefault(); 也可以通过form.submit()方式提交表单，但这种方式不会触发submit事件，因此要提前验证表单。 重置表单 input 和button两种按钮实现，可用form.reset重置表单，同时出发onreset事件。 form.elements获取表单name var
javascript form 对象
weixin_33981932的博客
08-31 73
2019独角兽企业重金招聘Python工程师标准>>> ...
js获取简单表单对象(1)
weixin_34032621的博客
05-24 167
<formid="form"> <inputtype="text"name="username"value="admin"/> </form> <script> functionformser(form){ varform=document.getElementById(form); ...
JSP中9个对象
weixin_30475039的博客
04-19 154
JSP中一共预先定义了9个这样的对象，分别为：request、response、session、application、out、pagecontext、config、page、exception 1、request对象javax.servlet.http.HttpServletRequest request对象代表了客户端的请求信息，主要用于接受通过HTTP协议传送到服务器的数据。...
php javascript对象,javascript对象
weixin_35785793的博客
03-28 118
1、什么是表单对象表单()是Web页面中的基本元素。表单对象最主要的功能就是能够直接访问页面中的表单。利用表单对象，可以实现与用户的交互；不需要服务器的介入，就可以实现动态改变Web页面的行为。对于Web页面表单，通常使用document对象的forms数组可以很方便地访问不同的表单。例如，某HTML文件片段如下：document对象的forms数组有两个元素：forms[0]可以访问第一个表单，...
JavaScript 表单
哈皮吖的博客
06-30 712
form(表单) form(表单)对于每个Web开发人员来说，应该是再熟悉不过的东西了，它是页面与Web服务器交互过程中最重要的信息来源。表单form的常用属性和常用的控件input如下： 1、form action 属性 action 属性规定当提交表单时，向何处发送表单数据。当提交表单时，发送表单数据到名为"a.html "的文件（处理输入）： <form action="a.html " method="get" > First name: <input type="text"
js取form对象方法,表单属性和方法
Developer of XingKong22star
08-18 7634
获取表单对象方法一、var form = document.forms['myform'];  得到表单的值：var usrname = form.elements['usrname'].value     获取表单对象方法二、var form = document.myform;     表单属性和方法：1.action 2.elements 3.enctype 4.leng
JavaScript正则表达式实战：表单验证
1. 定义：正则表达式是一种描述字符模式的对象，JavaScript通过`RegExp`类来表示正则表达式。正则表达式可以用于字符串的匹配、查找、替换等操作。 2. 创建正则表达式： - 使用`new RegExp()`构造函数：如`new ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值