javascript入门·表单与表单元素总结（表单验证）

作者：手机用户2502853201 | 来源：互联网 | 2023-10-15 18:44

表单提交前的最后验证：通常在表单提交前，我们必须确认用户是否都把必须填选的做了，如果没有，就不能被提交到服务器，这里我们用到表单的formname.submit()看演示，其实这个对于我们修炼道

表单提交前的最后验证：通常在表单提交前，我们必须确认用户是否都把必须填/选的做了，如果没有，就不能被提交到服务器，这里我们用到表单的 formname.submit() 看演示，其实这个对于我们修炼道教（错了，是.net）的人来说，有点多余，呵呵，毕竟微软的vs2003-2005都有非常棒棒棒的验证控件，如果有特别需要，自定义的验证也很不错哦，呵呵！！

演示一：这个也算对表单以及表单元素的一个综合演示了

用户名：
所在地区：
改变当前网页背景色	红黄绿

@LANGUAGE="Javascript" CODEPAGE="936" %>

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

< html xmlns ="http://www.w3.org/1999/xhtml" >

< head >

< meta http-equiv ="Content-Type" content ="text/html; charset=gb2312" />

< title > 表单与表单元素总结（表单验证） title >

< script language ="Javascript" >

function yanzhen(form)

{//这里主要是验证看表单是否真要提交

var d=form.dx.options.selectedIndex;//得到二级地区被选择的索引

if(form.txt.value!="")

{//如果txt文本框不等于空

if(form.dx.options[d].value!=0)

{//如果二级地区值不为0

return true;//那么表单可以提交

}

return false;

}

function xiao(x)

{

//这个函数是地区菜单的代码，关于联动菜单的

//详细解释在http://www.cnblogs.com/thcjp/archive/2006/08/10/473054.html

var formm=document.form1;

var dalength=formm.da.options.length;

var group=new Array(dalength);

for(i=0;i<dalength;i++)

group[i]=new Array();

group[0][0]=new Option("请选择省","0")

group[1][0]=new Option("绵阳","绵阳")

group[1][1]=new Option("成都","成都")

group[1][2]=new Option("南充","南充")

group[2][0]=new Option("北京","北京")

group[3][0]=new Option("上海","上海")

var dx=formm.dx;

for(l=dx.options.length-1;l>0;l--)

{

dx.options[l]=null;

}

for(j=0;j<group[x].length;j++)

{

dx.options[j]=new Option(group[x][j].text,group[x][j].value)

}

dx.options[0].selected=true

}

function bgc(color)

{//从下面单选按钮传递的值来看，他已经把我们要的东西直接打包拿来了

document.bgColor=color//直接把背景赋值即可

}

script >

head >

< body >

< p > 表单提交前的最后验证：通常在表单提交前，我们必须确认用户是否都把必须填/选的做了，如果没有，就不能被提交到服务器，这里我们用到表单的 formname.submit() 看演示，其实这个对于我们修炼道教（错了，是.net）的人来说，有点多余，呵呵，毕竟微软的vs2003-2005都有非常棒棒棒的验证控件，如果有特别需要，自定义的验证也很不错哦，呵呵！！ p >

< p >< strong > 演示一：这个也算对表单以及表单元素的一个综合演示了 strong > p >

< form id ="form1" name ="form1" method ="get" onsubmit ="return yanzhen(this)" action ="http://thcjp.cnblogs.com" >

< table width ="600" border ="0" cellspacing ="0" cellpadding ="5" >

< tr >

< td width ="163" > 用户名： td >

< td width ="417" >< input name ="txt" type ="text" id ="txt" /> td >

tr >

< tr >

< td > 所在地区： td >

< td >< select name ="da" id ="da" onchange ="xiao(options.selectedIndex)" >

< option value ="0" > 请选择 option >

< option value ="1" > 四川 option >

< option value ="2" > 北京 option >

< option value ="3" > 上海 option >

select >

< select name ="dx" id ="dx" >

< option value ="0" > 请选择省 option >

select > td >

tr >

< tr >

< td > 改变当前网页背景色 td >

< td > 红

< input type ="radio" name ="se" value ="red" onchange ="bgc(this.value)" />

黄

< input type ="radio" name ="se" value ="yellow" onchange ="bgc(this.value)" />

绿

< input type ="radio" name ="se" value ="green" onchange ="bgc(this.value)" /> td >

tr >

< tr >

< td colspan ="2" align ="center" >< input type ="submit" value ="提交" /> td >

tr >

table >

form >

< p > p >

body >

html >

推荐阅读

string
Struts2 + json+ jquery 实现三级联动action和jsp代码竟然有小红叉，提示缺双引号，检查了转义符号也没缺啊，求解

publicclassBindActionextendsActionSupport{privateStringproString;privateStringcitString; ... [详细]

蜡笔小新 2024-11-21 16:25:41
stream
Web动态服务器Python基本实现

Web动态服务器Python基本实现 ... [详细]

蜡笔小新 2024-11-21 08:01:30
timezone
Oracle VM VirtualBox 使用指南：创建静态网页及高级功能

本文详细介绍了如何在Oracle VM VirtualBox中实现主机与虚拟机之间的数据交换，包括安装Guest Additions增强功能，以及如何利用这些功能进行文件传输、屏幕调整等操作。 ... [详细]

蜡笔小新 2024-11-21 18:13:22
text
SIP基础概览

本文介绍了SIP（Session Initiation Protocol，会话发起协议）的基本概念、功能、消息格式及其实现机制。SIP是一种在IP网络上用于建立、管理和终止多媒体通信会话的应用层协议。 ... [详细]

蜡笔小新 2024-11-21 17:42:08
string
IC卡操作功能实现

本文介绍了如何通过C#语言调用动态链接库（DLL）中的函数来实现IC卡的基本操作，包括初始化设备、设置密码模式、获取设备状态等，并详细展示了将TextBox中的数据写入IC卡的具体实现方法。 ... [详细]

蜡笔小新 2024-11-21 11:02:19
stream
OBS Studio自动化实践：利用脚本批量生成录制场景

本文探讨了如何利用OBS Studio进行高效录屏，并通过脚本实现场景的自动生成。适合对自动化办公感兴趣的读者。 ... [详细]

蜡笔小新 2024-11-21 10:44:53
stream
PostgreSQL与MySQL的语法差异详解

本文详细介绍了PostgreSQL与MySQL在SQL语法上的主要区别，包括如何使用COALESCE替代IFNULL、金额格式化的方法、别名处理以及日期处理等关键点。 ... [详细]

蜡笔小新 2024-11-21 07:40:22
text
Python 开发环境最佳实践：Anaconda + Jupyter Notebook 快速上手指南

对于初学者而言，搭建一个高效稳定的 Python 开发环境是入门的关键一步。本文将详细介绍如何利用 Anaconda 和 Jupyter Notebook 来构建一个既易于管理又功能强大的开发环境。 ... [详细]

蜡笔小新 2024-11-21 18:30:23
string
Java 中的十进制样式 getZeroDigit()方法，示例

Java 中的十进制样式 getZeroDigit()方法，示例 ... [详细]

蜡笔小新 2024-11-21 16:53:03
string
Ryanair Expands Frankfurt Operations, Challenges Lufthansa's Dominance

Irish budget airline Ryanair announced plans to significantly increase its route network from Frankfurt Airport, marking a direct challenge to Lufthansa, Germany's leading carrier. ... [详细]

蜡笔小新 2024-11-21 13:09:01
range
MySQL InnoDB 存储引擎索引机制详解

本文深入探讨了MySQL InnoDB存储引擎中的索引技术，包括索引的基本概念、数据结构与算法、B+树的特性及其在数据库中的应用，以及索引优化策略。 ... [详细]

蜡笔小新 2024-11-21 12:41:51
js
通过命令行终止所有 Node.js 实例的方法

本文介绍了如何通过命令行有效地终止所有 Node.js 进程实例，以解决因端口冲突或其他服务冲突导致的问题。 ... [详细]

蜡笔小新 2024-11-21 12:14:06
range
解决JavaScript中法语字符排序问题

在开发一个使用JavaScript、HTML和CSS的Web应用时，遇到从SQLite数据库中提取的法语词汇排序不正确的问题，特别是带重音符号的字母未按预期排序。 ... [详细]

蜡笔小新 2024-11-21 09:08:57
header
如何从BAM文件绘制ATAC-seq插入片段长度分布图？

在ATAC-seq数据处理中，插入片段长度的分布图是一个重要的质量控制指标，它能反映出核小体的周期性排列。本文将详细介绍如何从BAM文件中提取并绘制这些数据。 ... [详细]

蜡笔小新 2024-11-20 22:35:16
stream
使用Service Locator模式实现高效的服务命名访问

本文探讨了如何通过Service Locator模式来简化和优化在B/S架构中的服务命名访问，特别是对于需要频繁访问的服务，如JNDI和XMLNS。该模式通过缓存机制减少了重复查找的成本，并提供了对多种服务的统一访问接口。 ... [详细]

蜡笔小新 2024-11-20 19:26:30

手机用户2502853201

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章