JavaScript笔记之表单处理

最新推荐文章于 2021-07-27 07:54:16 发布
最新推荐文章于 2021-07-27 07:54:16 发布
阅读量120 收藏
点赞数
文章标签： javascript xhtml 数据库 ViewUI

如果需要从Web站点的用户那里收集信息，那么就需要使用表单。

表单可以包含大多数常见的图形界面元素，包括输入字段、单选按钮、复选框、弹出菜单和输入列表。另外，HTML表单可以包含密码字段，这种控件会隐藏用户的输入以免被别人偷看。

在填写表格后，点击菜单上的Submit按钮将表单的信息发送到Web服务器，在服务器上CGI程序（Common Gateway Interface，它是在Web服务器上运行的一个脚本）会解释并操作这些数据。然后，常常将数据存储在数据库中供以后使用。在服务器端使用数据之前，需要确保用户输入的数据是准确（正确）的格式。

JavaScript是检查数据的好方法，这种技术称为表单验证（form validation）。尽管CGI可以完成验证（而且应该作为预防措施，因为有些用户会在浏览器中关闭JavaScript功能），但是在客户机用JavaScript进行验证要快得多，而且用户操作的效率也更高。

关于表单一些概括：

获取表单

var form=document.forms["form1"]; var form=document.fors[0];


form对象事件

onsubmit在表单提交之前触发
onreset在表单被重置之前触发

引用表单元素

var element=tForm.elements[idex]; var element=tForm.elements[elementName];

遍历一个表单中的所有表单域

for(var i=0;i<tForm.elements.length;i++){ // }

表单域的通用属性

1)创建只读(不可用)表单域
 element.disabled=true;
 element.disabled=false;
 2)获取表单域的值
 value

表单域的通用方法

1)表单域获得焦点：focus()

2)表单域失去焦点：blur()

表单域的通用事件

onFocus：获得焦点时，产生该事件
onBlur：失去焦点时，产生该事件
onselect：文字被加亮显示后（选择），产生该文件
onchange：表单域的值改变时
onclick:键盘单击
onkeydown:键盘按下
onkeyup:键盘松开
onkeypress:键盘按下松开
onmouseover:鼠标移上
onmouseout:鼠标移出
onmousedown:鼠标按下
onmouseup:鼠标松开

文本域、复选框、单选按钮、下拉列表框、表单验证等。

动态地改变菜单

常常需要通过弹出菜单向用户提供输入的机会，而且希望根据用户在另一个弹出菜单中所作的选择，改变一个或多个弹出菜单内容，以下示例用来选择月份，即根据所选月份选月份的天数，填充第二个弹出菜单：

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Dynamic Menus</title> <script type="text/javascript" src="script.js"></script> </head> <body bgcolor="#FFFFFF"> <form action="#"> <select id="months"> <option value="">Month</option> <option value="0">January</option> <option value="1">February</option> <option value="2">March</option> <option value="3">April</option> <option value="4">May</option> <option value="5">June</option> <option value="6">July</option> <option value="7">August</option> <option value="8">September</option> <option value="9">October</option> <option value="10">November</option> <option value="11">December</option> </select> <select id="days"> <option>Day</option> </select> </form> </body> </html>


在弹出菜单中选择一个值，然后就可以创建第二个弹出菜单的内容

/** * 动态地改变菜单 */ window.οnlοad=initForm; function initForm(){ document.getElementById("months").selectedIndex=0; document.getElementById("months").οnchange=populateDay; } function populateDay(){ var monthDays=new Array(31,28,31,30,31,30,31,31,30,31,30,31); var monthStr=this.options[this.selectedIndex].value; //使用this（用户在第一个菜单中选择的月份）从菜单中获得值，并将其存储在monthStr中 if(monthStr!=""){ var theMonth=parseInt(monthStr); document.getElementById("days").options.length=0; for(var i=0;i<monthDays[theMonth];i++){ document.getElementById("days").options[i]=new Option(i+1); } } }

(源《JavaScript基础教程》)

iteye_13633
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript 表单处理
Judy-命中注定与众不同
10-09 386
前言 表单放在form里面，对象为HTMLforelement，form表单提交使用submit提交，但是切记只有value为submit的才可以使用，如果为普通的button按钮是不可以使用submit，其次submit必须与form进行绑定，如果没有与form进行绑定那么也是不成功的 在命名的使用不要使用submit进行名称，因为会产生冲突 表单控件 form里面的input selec
JavaScript表单处理基础
有梦才叫青春
04-23 1896
JavaScript组成：ECMAScript,描述了该语言的语法和基本对象。文档对象模型（DOM），描述处理网页内容的方法和接口。浏览器对象模型（BOM），描述与浏览器进行交互的方法和接口。
javascript基础：表单处理1
gongwutianya的博客
07-10 431
一、表单介绍 为了分担服务器处理表单的压力, JavaScript 提供了一些解决方案,从而大大打破了处处依赖服务器的局面。 在 HTML 中,表单是由元素来表示的,而在 JavaScript 中,表单对应的则是HTMLFormElement 类型。HTMLFormElement 继承了 HTMLElement,因此它拥有 HTML 元素具有的默认属性,并且还独有自己的属
Javascript处理表单的相关操作
秘密基地
08-08 929
在网页中有时候会用到表单进行用户的一些登录注册等等一系列的操作，下面就练习了一些简单的操作。<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表单练习</title> <style type="text/css"> *{ padding:0px; margn:0px; } #regForm{
javascript基础：表单处理2
gongwutianya的博客
07-12 329
一、文本框脚本 在 HTML 中,有两种方式来表现文本框: 一种是单行文本框 , 一种是多行文本框。 虽然在字面上有 value 值,而却没有,但都可以通过 value 获取他们的值。 window.addEventListener('load',function(){ var fm = document.getElementById('myform');
李立超JavaScript基础篇笔记
02-02
JavaScript，简称JS，是由Brendan Eich在1995年创造的一种高级编程语言，最初目的是为了增强网页的交互性，特别是在前端进行表单验证。JavaScript不是Java的子集，两者之间没有直接关联。JS起初名为LiveScript，但在...
JavaScript学习笔记之内置对象
11-30
在这个学习笔记中，我们将探讨JavaScript的内置对象，主要包括Window、Screen、Location、History等，它们都是JavaScript环境中非常重要的组成部分。 首先，Window对象是JavaScript的核心，它代表了浏览器的窗口。...
JavaScript笔记.pdf
07-24
- **操作表单**：可以使用 DOM 方法来读取或修改表单元素的值。 ```javascript var input = document.getElementById('inputName'); console.log(input.value); ``` #### jQuery 文档工具站 jQuery 是一个快速...
JavaScript笔记知识点整理图文.pdf
最新发布
11-29
JavaScript笔记知识点整理图文 JavaScript是一种广泛应用于web开发的脚本语言，由于其灵活性、跨平台性和动态性，JavaScript广泛应用于Web前端开发、移动应用开发、桌面应用开发等领域。下面是 JavaScript 笔记知识...
JavaScript笔记：表单脚本
YuqiRealm.com
09-20 2978
JavaScript笔记：表单脚本 1、表单的基础知识 2、文本框脚本 3、选择框脚本 4、表单序列化 5、富文本编辑
JavaScript 操作表单
寇大大的博客
06-07 513
目录 JS操作表单 1.HTML表单 2、获取值 3、设置值 4、提交表单 JS操作表单 1.HTML表单 用JavaScript操作表单和操作DOM是类似的，因为表单本身也是DOM树。 不过表单的输入框、下拉框等可以接收用户输入，所以用JavaScript来操作表单，可以获得用户输入的内容，或者对一个输入框设置新的内容。 HTML表单的输入控件主要有以下几种： 文本框，对应的<input type="text"> ，用于输入文本； 口令框，对应的<input .
如何通过纯javascript实现表单提交
热门推荐
tanmx219的博客
01-07 1万+
如何通过纯javascript实现表单提交通常，如果是POST方法，一般使用vuejs+axios，或使用Jquery实现表单提交。有些地方，我想使用纯JS实现，比方简单的登陆跳转。话不多说，看原代码，laravel中的HTML部分，如果不是laravel，去掉 {{csrf_field()}}这一行即可<form class="form-signin" id="myform"> {{csr
9章 表单[js] —— javaScript宝典
weixin_33878457的博客
06-15 90
9.1 form对象 form对象 document.forms[0] 使用元素名称的字符串作为数组下标 document.forms[“formName”] 注意：数组引用单词的复数形式 另外可以使用表单名 document.formName 9.1访问表单属性 document.forms[0].action = ”http://www.howia.net” ;  ...
操作表单验证加密
m0_53698336的博客
07-27 350
用JavaScript操作表单和操作DOM是类似的，因为表单本身也是DOM树。 不过表单的输入框、下拉框等可以接收用户输入，所以用JavaScript来操作表单，可以获得用户输入的内容，或者对一个输入框设置新的内容。 HTML表单的输入控件主要有以下几种： 文本框，对应的<input type="text">，用于输入文本； 口令框，对应的<input type="password">，用于输入口令； 单选框，对应的<input type="radio">，用
JavaScript 表单脚本
weixin_34291004的博客
09-30 80
JavaScript 表单脚本 通过 document.forms 可以获得一个包含当前页面中所有表单的集合 HTMLFormElement 接口 下面是这个接口常用的属性和方法： action：接受请求的 URL，等价于 HTML 中的 action 特性。 elements：返回表单中所有控件（或表单字段）的集合（HTMLFormC...
<Java Web学习初级阶段>JavaScript实现注册页面的表单验证
拂晓弄尘影的博客
09-12 9352
代码实现： 表单验证 //初始化页面 function initform(){ //第一个文本框获取焦点 //document.getElementById("username").focus(); //产生验证码 getCode(); } //产生验证码 function getCode(){ var code = String(Math.round(M
JavaScript10 表单处理
weixin_44055272的博客
05-06 315
1 获取表单元素 例如下面的表单元素，想要获取姓名和年龄。 <form name="form1"> 姓名: <input id="name" type="text" name="name"><br/> 年龄: <input id="age" type="text" name="age"> <input t...
JavaScript正则表达式实现表单验证
"这篇JavaScript笔记主要涵盖了表单验证的一些常见功能，包括电话号码验证、电子邮件验证、中文大写字母验证以及中文字符验证，同时也提到了一个正则表达式比较两个字符串的方法。" JavaScript是一种广泛应用于网页...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值