JavaScript DOM学习第六章 表单实例

表单实例
这是一个表单的实力。这里有一个小问题：因为我的服务器现在不支持，所以表单不能提交。我会打印出你的输入，然后返回一个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)

赞 (0)

相关推荐

  • 使用原生javascript创建通用表单验证——更锋利的使用dom对象

    使用原生javascript创建通用表单验证——更锋利的使用dom对象

    首先看下效果,没什么特别,呵呵! 调用的代码呢,则是相当简单,不需要创建其他的Label或者span标签,脚本将自动生成: 复制代码 代码如下: <input type="text" id="txt1" onkeyup="checkResult(this.value == '', 'txt1', ' *这里不能为空喔!')" /> 接下来我们看下这个checkResult这个函数,checkCondition参数表示判断条件,当条件为

  • JavaScript DOM学习第八章 表单错误提示

    在我看来,警告框只用在浏览器不支持其他显示错误信息的办法的时候.W3C建议我们在表单项的附近显示错误信息.这是一种很好的办法,所以我们只在浏览器不支持这种高级的办法的时候才使用警告对话框. 例子 试试下面的例子.每一项都是必须的.另外我会坚持email项是否有@符号.如果没有也会提示错误信息. 复制代码 代码如下: var W3CDOM = (document.getElementsByTagName && document.createElement); window.onload =

  • JQuery动态创建DOM、表单元素的实现代码

    复制代码 代码如下: <!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=&qu

  • JavaScript DOM 学习第七章 表单的扩展

    想法 假设你有一个在线的CD评级工具.你希望用户查看他们喜欢的所有CD.但是你怎么知道用户平均会查看多少张呢?你在这个页面上需要添加多少字段呢? 在W3CDOM出现之前这确实是一个问题.假设你放置了7张CD.但是用户很可能只想查看一张,太多可能会吓着用户,而有些用户想查看自己的所有CD,这样就不得不反复提交很多次.这确实很烦人. 只有使用W3C DOM才能让用户决定生成多少个字段.这个效果和之前的大不相同. 例子 当你点击发送的时候,表单就会把得到的所有参数以数组的形式发送.这用来检查是否真正的

  • DOM基础教程之使用DOM控制表单

    DOM基础教程之使用DOM控制表单

    1.表单简介 表单<form>是网页中交互最多的形式之一,它通过各种形式接收用户的数据,包括下拉列表框,单选按钮,复选框和文本框,本篇主要介绍表单中常用的属性和方法 javascript中可以很方便的操作表单,例如获得表单数据进行有效验证,自动给表单域赋值,处理表单事件等. 此时每个form都解析为一个对象,即form对象,可以通过document.forms集合来引用这些对象,例如一个nama属性为form1的表单可以使用 复制代码 代码如下: document.forms["fo

  • JavaScript DOM 学习第五章 表单简介

    因为每一个表单的检测项都不同,所以我也不能给你一个万能的代码.你需要用我在这一章介绍的这些元素构建自己的检测函数.我在后面一张还有一个例子,你也可以参考. 在这一章我会首先讨论一下用JavaScript来检测表单的局限性,然后会解释一下提交时间处理程序,然后是表单本身的一些方法和属性.最后就是如何访问表单元素. 这里还有一篇Jeff Howden的介绍表单的使用错误和解决办法.Forms & JavaScript Living Together in Harmony局限性 首先,你需要了解当用户

  • IE在DOM操作有表单控件时的bug

    bug描述 当象下例中那样操作了表单radio/checkbox的DOM结构时(或者直接影响了他们的结构时)选中的checkbox/radio将会自动恢复到默认状态,有如点了reset按钮一样. Rank's HTML document /**/ IE form control bug from: never-online weblog 1. Select radio to checked radio1 radio2 radio3 radio4 2. Click button to change

  • jquery中dom操作和事件的实例学习-表单验证

    很显然,这样做能提升更好的用户体验. html代码: 复制代码 代码如下: <form method="post" action=""> <div class="int"> <label for="username">用户名:</label> <input type="text" id="username" class="r

  • JavaScript DOM学习第六章 表单实例

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

  • JavaScript Event学习第六章 事件的访问

    现在我们已经注册了事件处理程序,对于事件我们还想更深入的了解.我们想知道事件发生时候的鼠标位置,我们想知道用户按下了哪些键.这些都是可能的,虽然这部分有很多烦人的浏览器兼容性问题.(这里可以快速查看浏览器兼容性列表). 要读出事件的属性,必须要先能访问到事件. 浏览器兼容性 站在浏览器战争的角度看,Netscape实现了一个访问模型(后来被W3C做借鉴)和很多的事件属性,同时微软也做了同样的事情.当然这两种模型是完全不兼容的.但是就像我们再简介里面说的,如果 复制代码 代码如下: if (W3C

  • JavaScript DOM学习第四章 getElementByTagNames

    getElementByTagNames(注意是复数的names)会获得一些tag的元素,然后按照他们的顺序保存在一个数组中.这非常的有用,比如在上一章的TOCScript中,就需要获得整个文章里面的所有的H3和H4. 我非常希望在node原型中加入这个功能,但是在IE和Safari里面不行.所以只能把他当做一个普通函数. 使用 getElementByTagNames有两个参数: 1.一个用逗号分隔的tag名称字符串. 2.一个可选的开始元素.如果存在则在该元素的子元素中查找这些tag,如果不

  • JavaScript DOM 学习第三章 内容表格

    如果你也想这么做,那么你还需要我的getElementByTagNames()函数. 复制代码 代码如下: function createTOC() {     var y = document.createElement('div');     y.id = 'innertoc';     var a = y.appendChild(document.createElement('span'));     a.onclick = showhideTOC;     a.id = 'content

  • JavaScript DOM 学习总结(五)

    1.DOM简介. 当页面加载时,浏览器会创建页面的文档对象模型(Document Object Model).文档对象模型定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构,即节点树.通过DOM,JS可创建动态的HTML,可以使网页显示动态效果并实现与用户的交互功能.JS能够改变页面中所有的HTML元素.属性和CSS样式,并对页面中所有事件做出响应.所以学习JS的起点就是处理网页,处理网页就需要使用DOM进行操作. 2.DOM获取元素. JS要想操作H

  • javascript巧用eval函数组装表单输入项为json对象的方法

    本文实例讲述了javascript巧用eval函数组装表单输入项为json对象的方法.分享给大家供大家参考,具体如下: 在ajax方式做web开发时,经常会遇到会保存前,收集表单输入项,组成json对象,然后把对象直接post到服务端的场景 常规做法是在js里写类似如下的代码: var myObj = {}; myObj.x = document.getElementById("x").value; myObj.y = document.getElementById("y&q

  • Vue表单实例代码

    什么是 Vue.js? Vue.js 是用于构建交互式的 Web 界面的库. Vue.js 提供了 MVVM 数据绑定和一个可组合的组件系统,具有简单.灵活的 API. Vue.js 特点 简洁: HTML 模板 + JSON 数据,再创建一个 Vue 实例,就这么简单. 数据驱动: 自动追踪依赖的模板表达式和计算属性. 组件化: 用解耦.可复用的组件来构造界面. 轻量: ~24kb min+gzip,无依赖. 快速: 精确有效的异步批量 DOM 更新. 模块友好: 通过 NPM 或 Bower

  • jQuery异步提交表单实例

    前言: 我们在开发的时候,一定会使用ajax异步提交表单,在这里总结一下: 前提准备:引入脚本 <!--jquery需要引入的文件--> <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.js"></script> <!--ajax提交表单需要引入jquery.form.js--> <script type="text/javascript&q

随机推荐