当前位置: 首页 > 图文教程 > 网络编程 > Javascript > JavaScript DOM学习第六章 表单实例

Javascript
javascript下操作css的float属性的特殊写法
javascript之DIV拖动类 支持在FF下拖动,调用简单
Expandable "Detail" Table Rows
用javascript实现给出的盒子的序列是否可连为一矩型
PNGHandler-借助JS让PNG图在IE下实现透明(包括背景图)
JS创建优美的页面滑动块效果 - Glider.js
发一个比较漂亮的选项卡动态增删的效果
可多次使用的仿126邮箱选项卡的源码
javascript仿XP关机效果的弹出窗口功能
JS控制CSS样式的方法
非常漂亮的JS代码经典广告
推荐自用 Javascript 缩图函数 (onDOMLoaded)……
几个不错的自动收缩菜单导航效果
iframe src为图片时的高度自适应的代码
论坛转贴工具中用到的正则表达式学习正则的好例子
用javascript实现的不错的一款网页选项卡
摘自百度的图片轮换效果代码
用javascript实现旋转图片效果的代码
javascript 制作坦克大战游戏初步 图片与代码
比较简单的jquery教程 Easy Ajax with jQuery 中文版全集

Javascript 中的 JavaScript DOM学习第六章 表单实例


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2010-02-27   浏览: 182 ::
收藏到网摘: n/a

在这一章我有一个检查用户输入然后打印用户输入的表单和代码。下面我会着重讲解检测文本的代码。 表单实例
这是一个表单的实力。这里有一个小问题:因为我的服务器现在不支持,所以表单不能提交。我会打印出你的输入,然后返回一个false,这样表单就没有被提交。
onSubmit的代码做了两件事情:检查你是否在四个文本框里面都填写了数据,然后把所有的元素都连接起来打印在下面的文本区域中。
原文中有实例,需要童鞋请移步,我就不搬过来了。
检测文本区域
这段代码会检测用户是否在文本框内输入了内容。他会忽略复选框和单选框,但是会总提醒用户选择select box,就算你选了,也会提醒,因为他的值总是null。所以最好在你只是用来检测文本段的时候使用这段代码。
复制代码 代码如下:

function checkscript() {
for (i=0;i<4;i++) {
box = document.example.elements[i];
if (!box.value) {
alert('You haven\'t filled in ' + box.name + '!');
box.focus()
return false;
}
}
return true;
}

在这个例子中,我想检查0--3号元素,所以我设置一个变量i。你会注意到,我使用的是数字而不是使用name。这个就是数字好过name的一个例子。
复制代码 代码如下:
for (i=0;i<4;i++) {

然后我创建一个变量box,用来访问当前元素。如果不创建的话,我就需要把document.example.elements[i]写上好几遍,我可懒得写。
复制代码 代码如下:
box = document.example.elements[i];

如果这个文本框的值为空,那么我们就需要做:
复制代码 代码如下:
if (!box.value) {

首先我们使用文本框的name,如果你的命名比较明白,那么用户也会比较好理解是哪个文本框除了问题。
复制代码 代码如下:
alert('You haven\'t filled in ' + box.name + '!');

作为一个附加服务,我们把焦点放置在有问题的文本框上,这样用户就能够马上填写了。因为所有的浏览器都支持,所以也不需要做检测:
复制代码 代码如下:
box.focus()

然后我们返回一个false。代码停止运行,表单也不会提交。等待用户输入。
复制代码 代码如下:
return false;

如果所有的文本框都填写了,返回true,以表示一切正常。函数停止,表单提交。
复制代码 代码如下:

}
}
return true;

翻译地址:http://www.quirksmode.org/js/formex.html
转载请保留以下信息
作者:北玉(tw:@rehawk)