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

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


代码如下:

var W3CDOM = (document.getElementsByTagName && document.createElement);

window.onload = function () {
    document.forms[0].onsubmit = function () {
        return validate()
    }
}

function validate() {
    validForm = true;
    firstError = null;
    errorstring = '';
    var x = document.forms[0].elements;
    for (var i=0;i<x.length;i++) {
        if (!x[i].value)
            writeError(x[i],'This field is required');
    }
    if (x['email'].value.indexOf('@') == -1)
        writeError(x['email'],'This is not a valid email address');
    if (!W3CDOM)
        alert(errorstring);
    if (firstError)
        firstError.focus();
    if (validForm)
        alert('All data is valid!');
    return false;
}

function writeError(obj,message) {
    validForm = false;
    if (obj.hasError) return;
    if (W3CDOM) {
        obj.className += ' error';
        obj.onchange = removeError;
        var sp = document.createElement('span');
        sp.className = 'error';
        sp.appendChild(document.createTextNode(message));
        obj.parentNode.appendChild(sp);
        obj.hasError = sp;
    }
    else {
        errorstring += obj.name + ': ' + message + '\n';
        obj.hasError = true;
    }
    if (!firstError)
        firstError = obj;
}

function removeError()
{
    this.className = this.className.substring(0,this.className.lastIndexOf(' '));
    this.parentNode.removeChild(this.hasError);
    this.hasError = null;
    this.onchange = null;
}

解释
首先我们坚持是否支持W3C DOM。这个例子能够在mac上的IE工作,但是如果在其他页面上不能工作很正常。因为那个浏览器对W3C DOM的支持还不够,不能应对所有情况。

然后我们创建了onsubmit的事件处理程序,这个程序调用我们的验证函数validation()。

代码如下:

var W3CDOM = (document.getElementsByTagName && document.createElement);

window.onload = function () {
    document.forms[0].onsubmit = function ()    {
        return validate()
    }
}

validate()
我们假设表单是验证通过了的(validForm=true),我们设置firstError=null。最终我们会给第一个错误元素一个焦点。然后创建一个字符串:errorstring,这个包含所有的错误信息。这个只针对W3C DOM浏览器。

代码如下:

var x = document.forms[0].elements;
for (var i=0;i<x.length;i++) {
    if (!x[i].value)
        writeError(x[i],'This field is required');
}
if (x['email'].value.indexOf('@') == -1)
    writeError(x['email'],'This is not a valid email address');

这个vlidate()函数的核心和平常的一样。按照你想的任何顺序检查错误。当你发现了一个错误,调用writeError()然后传递给他错误的表单项和错误信息。

如果浏览器不支持W3C DOM,那就用errorString生成一个警告框。你或许想修改一下警告框的内容。

代码如下:

if (!W3CDOM)
alert(errorstring);

为了给用户方便,把焦点设置在第一个错误的元素上。

最后返回validaForm,如果还是true就提交表单,如果不是就停止提交。

writeError()
这个函数用来把错误信息输出到表单项上。如果失败,说明浏览器不支持W3C DOM,然后就把错误信息发送到errorstring。
这个函数会传递一个表单项和一条错误信息。

代码如下:

function writeError(obj,message)
{

首先我们设置validForm为false:这个表单填写不正确,不应该被提交。

代码如下:

validForm = false;
}

然后检测表单项是否已经有了一个错误提示。如果有了,就返回到validation()函数,我可不想再同一项后面有两个错误提示。

if (obj.hasError) return;检查浏览器是否支持W3C DOM:

代码如下:

obj.className += ' error';

接着给错误表单项设置一个onchange的事件处理程序:

代码如下:

obj.onchange = removeError;

创建一个<span>来装在错误信息,并且设置它的类为"error"。在CSS里面设置要呈现的样式。

代码如下:

var sp = document.createElement('span');
sp.className = 'error';

给<span>添加一个错误信息的文本节点。

代码如下:

sp.appendChild(document.createTextNode(message));

然后把这个<span>添加到相应的表单项后买(在这个例子中,每个表单项都有一个<p>标签)。

代码如下:

obj.parentNode.appendChild(sp);

最终,给这个表单设置hasError属性。这个属性既可以用来说明有错误的表单项也可以方便将来移除错误信息。

代码如下:

obj.hasError = sp; 2 }
对于不支持的浏览器,我们把表单项目的名称和错误信息保存在errorstring里面。这个字符串会在最后弹出。也给他设置hasError属性。

[code] else {
errorstring += obj.name + ': ' + message + '\n';
obj.hasError = true;
}

如果这时候validForm的值还是true那么将firstError设置为现在的元素。以便于将来设置焦点。

代码如下:

if (validForm)
firstError = obj;
removeError()

每一个错误表单项的onchange的事件处理程序都指向这个函数。如果用户修改了相应的表单项,我们礼貌的假设错误已经修正了。因此错误信息应该消失。

首先移除表单项的类中的error项。这个用来移除特别的错误样式。

代码如下:

function removeError() {
this.className = this.className.substring(0,this.className.lastIndexOf(' '));

然后移除错误信息。hasError属性指向包含该信息的<span>,所以我们从表单项的父元素移除它。

代码如下:

this.parentNode.removeChild(this.hasError);
最后再做一些清理。设置hasError属性为null,然后移除onchange的事件处理程序。

[code]this.hasError = null;
this.onchange = null;
}

翻译地址:http://www.quirksmode.org/dom/error.html

转载请保留以下信息
作者:北玉(tw:@rehawk)

(0)

相关推荐

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

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

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

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

  • 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局限性 首先,你需要了解当用户

  • 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才能让用户决定生成多少个字段.这个效果和之前的大不相同. 例子 当你点击发送的时候,表单就会把得到的所有参数以数组的形式发送.这用来检查是否真正的

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

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

  • 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

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

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

  • AngularJS学习笔记之表单验证功能实例详解

    本文实例讲述了AngularJS学习笔记之表单验证功能.分享给大家供大家参考,具体如下: 一.执行基本的表单验证 <!DOCTYPE html> <html ng-app='exampleApp'> <head> <meta charset="UTF-8"> <title>表单</title> <script src="../../js/angular.min.js" type="

  • 深入学习jQuery Validate表单验证

    本文实例介绍了jQuery Validate表单验证,主要是利用jquery.metadata.js将校验规则直接写在class属性里面并定义错误信息的提示,分享给大家供大家参考,具体内容如下 1.添加一个另外一个插件jquery.metadata.js 并把校验规则写在控件里面. 2.需要改写触发校验的方式. $("#commentForm").validate({meta: "validate"}); 3.详细代码如下: <html> <hea

  • JavaScript实现动态添加Form表单元素的方法示例

    本文实例讲述了JavaScript实现动态添加Form表单元素的方法.分享给大家供大家参考,具体如下: 之前写过类似的文章(如:javascript实现的动态添加表单元素input,button等),现在看来比较初级,弄一个高级的简单的 情景: 后台要上传游戏截图,截图数量不确定,因此使用动态添加input节点的方法去实现这个效果 主要用到的函数有: document.getElementById(); objNode.parentNode; objNode.cloneNode(); objNo

  • JavaScript DOM 学习总结(五)

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

  • 学习使用jQuery表单验证插件和日历插件

    首先学习使用jQuery表单验证插件: 1.Jquery表单验证插件-Validation的学习与使用 (1)Validation的验证有几种规则,一是在class属性中定义验证规则,如class="required",minlength="2".为了实现将验证规则完全编写到class属性中,另外一种是通过引入新的jquery插件-jquery.metadata.js来实现验证规则的定义,此时表单的验证调用的方法改为如下所示的代码: 将$("#form&q

  • 深入学习jQuery Validate表单验证(二)

    本文实例介绍了jQuery Validate表单验证,分享给大家供大家参考,具体内容如下 一.添加一个另外一个插件jquery.validate.messages_cn.js. 改变默认提示方式. /* * Translated default messages for the jQuery validation plugin. * Language: CN * Author: Fayland Lam <fayland at gmail dot com> */ jQuery.extend(jQ

  • Flask框架学习笔记之表单基础介绍与表单提交方式

    本文实例讲述了Flask框架学习笔记之表单基础介绍与表单提交方式.分享给大家供大家参考,具体如下: 表单介绍 表单是HTML页面中负责数据采集功能的部件.由表单标签,表单域和表单按钮组成.通过表单,将用户输入的数据提交给服务器,并交给服务端进行处理. 表单标签 用于声明表单的范围,位于表单标签的元素将被提交. 语法:<form></form> 属性:Method规定用于发送表单数据的 HTTP 方法. Enctype规定在向服务器发送表单数据之前如何对其进行编码.(适用于 meth

  • JavaScript获取按钮所在form表单id的方法

    本文实例讲述了JavaScript获取按钮所在form表单id的方法.分享给大家供大家参考.具体如下: 这里使用javascript获取form表单按钮的id,可以通过下面的JS代码获取. <!DOCTYPE html> <html> <body> <h1>www.sharejs.com</h1> <form id="form1"> <button id="button1" type=&q

随机推荐