JavaScript表单编程
一、 对form元素进行脚本编写
1、 获取表单
Var oForm=Document.getElementById(“form1”)
Var oForm=Document.form[i]—第i个表单
Var oForm=Document.form[“formz”]—名为formz的表单
2、 访问表单字段
oForm.element[i]
oForm.Element[“textbox1”]
oForm.textbox1
3、 表单字段共性
Disabled属性:指示一个表单控件是否可用
Form属性:返回包含字段的表单
Blur()方法:导致表单字段失去焦点
Focus()方法:导致表单字段获得焦点
Blur事件:当表单失去焦点时发生该事件,随后执行onblur事件处理程序
Focus事件:当表单获得焦点时发生该事件,随后执行onFocus事件处理程序
4、 表单提交
调用submit()方法:oForm.submit
使用submit按钮:<input type=”submit” />
阻止表单提交,只需将提交的返回值设为false即可:
<form method=”post” action=”#” οnsubmit=”return false”>
5、 表单重置
使用reset按钮:<input type=”reset” />
调用submit()方法:oForm. reset()
二、 对文本框进行脚本编写
单行版本<input type=”text”>
多行版本<textarea/>
1、获取/更改文本框的值
Value属性
Lentgh属性
2、选择文本框
Select()方法
Focus()方法
3、文本框事件
Blur事件
Focus事件
Change事件
Select事件
三、 对列表框和组合框进行脚本编写
1、 访问选项
Text:返回option元素的显示文本
Value:返回option元素的值
Index:指示该option在option集合中的位置
Length:判断有多少选项
2、 获取/更改选中项
SelectedIndex属性:返回当前被选中选项的索引
Selected属性:指示某个选项是否被选中
3、 添加选项
第一步:定义一个带三个参数的方法,三个参数分别是要添加选项的列表框、要添加的选项名称和要添加选项的值
第二步:创建一个option元素和文本节点,将后者分配给前者
第三步:设置option元素的value属性
第四步:通过appendChild()方法将其添加到select元素中
4、 移除选项
1) 使用option集合,将要移除的选项设置为null
2) 利用select元素的remove()方法
5、 重新排序
调用insertBefore()方法
四、 对复选框和单选框进行脚本编写
Checked—布尔值,指示控件状态
DefaultChecked—布尔值,指示页面装载时控件是否被选中
Click()--模仿按钮点击,改变控件状态,对应事件是onclick。
我们可以通过value属性来获得单选框和复选框的值。
五、 表单验证
1、 使用submit事件在错误发生之后捕获错误
2、 使用change事件在错误发生时捕获错误
3、 使用keypress事件在错误发生之前捕获错误
表单校验最佳实践
1) 必须对用户有帮助
2) 不要让人讨厌
3) 只要有可能就用HTML代替JavaScript
4) 一次显示所有的错误
5) 尽早捕获错误
6) 如果拿不准就不要太严格
省市级联下拉框 相关代码
Html代码
<form action="">
<label for="s1"></label><select name="" id="s1" οnchange="f();">
<option value="">1</option>
</select>
<label for="s2"></label><select name="" id="s2">
<option value="">2</option>
</select>
</form>
--------创建两个select元素
Js代码
var arr = [];
arr['a'] = ['a1', 'a2, 'a3'];
arr['b'] = ['b1', 'b2', 'b3'];
arr['c'] = ['c1', 'c2', 'c3'];
arr['d'] = ['d1', 'd2', 'd3'];
for (var i in arr) { //将数组arr[]中的值依次添加到s1中
document.getElementById("s1").add(new Option(i), null)
}
function f() {
var v1 = document.getElementById("s1");
var v2 = document.getElementById("s2");
for (var i in arr) {
//每当s1的值发生改变时s2中的值也发生相应的改变
if (v1.value == i) {
v2.options.length = 1; //使s2的值变为2
for (var j in arr[i]) {
v2.add(new Option(arr[i][j]), null)
}
}
}
}
转载于:https://www.cnblogs.com/p719027365/p/4086197.html
JavaScript表单编程相关推荐
- JavaScript 表单编程
1.对form元素进行脚本编写 用javascript对form元素编写脚本与对其它HTML元素编写脚本有所不同.在编写脚本时,不是仅限于使用核心DOM方法访问表单:我们用很多不同方访问form元素本 ...
- javascript 表单验证大全(一)
javascript 表单验证大全(一) 5.身份证验证:包括15位和18位.function idNumber(s)//身份证验证 {regu1=/^[1-9]\d{7}((0\d)|(1[0-2] ...
- JavaScript中的表单编程
表单编程 1获取表单相关信息 1.什么是表单元素 1.什么是表单元素 在H TML中表单就是指form标签,它的作用是将用户输入或选择的数据提交给指定的服务器 2.如何获取表单元素 <form ...
- JavaScript 表单与表单验证
JavaScript 表单 JavaScript 表单验证 HTML 表单验证可以通过 JavaScript 来完成. 以下实例代码用于判断表单字段(fname)值是否存在,如果存在,则弹出信息,否则 ...
- 10个强大的Javascript表单验证插件推荐
创建一个JavaScript表单验证插件,可以说是一个繁琐的过程,涉及到初期设计.开发与测试等等环节.实际上一个优秀的程序员不仅是技术高手,也应该是善假于外物的.本文介绍了10个不错的JavaScri ...
- html表单验证js代码,JavaScript表单验证实现代码
JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证 JavaScript 表单验证 JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输 ...
- js html form,JavaScript 表单
JavaScript 表单 JavaScript 表单验证 HTML 表单验证可以通过 JavaScript 来完成. 以下实例代码用于判断表单字段(fname)值是否存在, 如果不存在,就弹出信息, ...
- JavaScript 表单专题
JavaScript 表单专题 访问表单的方式 访问form表单控件的方式 Form 表单对象 Form 对象集合 Form 对象属性 Form 对象方法 Form 对象事件句柄 单行文本框 Text ...
- 15个最佳的 JavaScript 表单验证库
客户端验证在任何项目都是不够的,因为 JavaScript 可以直接忽略,人们可以提交请求到服务器. 然而这并不意味着客户端验证都没必要了,很多时候我们需要在用户提交到服务器之前给予提示.JavaSc ...
- 15个非常实用的JavaScript表单验证库
来源:web前端开发 https://mp.weixin.qq.com/s/p9s9cmAt2MZeCgmD2LC5Sg 客户端验证在任何项目都是不可缺少的,很多时候我们需要在用户提交到服务器之前给予 ...
最新文章
- ActiveMQ—消息特性(延迟和定时消息投递)
- KVM精简教程(一):安装KVM
- 《qss样式表笔记大全(二):可设置样式的窗口部件列表(上)(包含相关示例)》
- 【已解决】Class not found: “com.bjpowernode.MyTest“
- Kafka Consumer多线程实例
- expecting statement错误的一种情况(phpstorm 8.0.2)
- Protocol Buffers的应用
- 基于几何距离的椭圆拟合
- linux比较两个目录的差异
- 防止屏蔽,背投广告代码的完善
- 可以写在简历上的22个轻松上手的Java经典项目教程(含源码and笔记)
- 机房收费系统——项目开发计划书
- c++ vector随机排序
- C#窗体连连看小游戏(超详细)
- java大文件下载失败_java文件下载超过4G文件错误
- 中英文电子书免费下载网站大全
- 常用类(API)第一节
- 量化学习:大数据时代的学习方式
- Matlab设计简易计算器
- ADOBE AIR是什么?
热门文章
- 左移寄存器vhdl_用VHDL实现的通用循环移位寄存器
- java socket 清理缓冲器_2021年Java全套面试题抢先看!中篇(更新中......)
- 正则表达式在NLP的基本应用
- IntelliJ Idea14 创建Maven多模块项目,多继承,热部署配置总结(一)
- linux命令文本处理(一)grep
- iptables conntrack有什么用
- 读史知今、以史为鉴 【技术商业化】
- 非常好的关于android安全的博客
- JavaScript中defer 和onload的执行顺序
- Remoting Generic Async Queue (Release 2) override InitializeLifetimeService return null