程序员之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → 基础知识 → JavaScript DOM 表单错误提示

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

 更新时间：2010年02月19日 13:53:39   作者：  
这一章详细介绍的表单错误提示的方法比那种大多数使用警告框的方法要好的多。
（福利推荐：【腾讯云】服务器最新限时优惠活动，云服务器1核2G仅99元/年、2核4G仅768元/3年，立即抢购>>>：9i0i.cn/qcloud）

（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）

在我看来，警告框只用在浏览器不支持其他显示错误信息的办法的时候。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)
您可能感兴趣的文章:

相关文章

  • javascript中undefined与null的区别

    javascript中undefined与null的区别

    这篇文章介绍了javascript中undefined与null的区别，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2022-06-06
  • 详解JavaScript的变量

    详解JavaScript的变量

    这篇文章主要介绍了JavaScript变量，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • javascript 进阶篇1 正则表达式，cookie管理，userData

    javascript 进阶篇1 正则表达式，cookie管理，userData

    接下来开始我们的进阶之路,更实用的技巧分享
    2012-03-03
  • 关于全局变量和局部变量的那些事

    关于全局变量和局部变量的那些事

    关于全局变量和局部变量的那些事,有哪些事呢？不要走开，接下来将详细介绍，感兴趣的朋友可以了解下哦
    2013-01-01
  • Javascript实例教程(19) 使用HoTMetal(2)

    Javascript实例教程(19) 使用HoTMetal(2)

    Javascript实例教程(19) 使用HoTMetal(2)...
    2006-12-12
  • 三个js循环的关键字示例(for与while)

    三个js循环的关键字示例(for与while)

    这篇文章主要介绍了三个js循环的关键字示例，主要是for与while,需要的朋友可以参考下
    2016-02-02
  • JavaScript:Date类型全面解析

    JavaScript:Date类型全面解析

    下面小编就为大家带来一篇JavaScript:Date类型全面解析。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧，祝大家游戏愉快哦
    2016-05-05
  • 深入领悟JavaScript中的面向对象

    深入领悟JavaScript中的面向对象

    在 JavaScript 中，对象分为两种。一种可以称为“普通对象”，就是我们所普遍理解的那些：数字、日期、用户自定义的对象（如：{}）等
    2013-11-11
  • 浅谈JS和jQuery的区别

    浅谈JS和jQuery的区别

    这篇文章主要介绍了JS和jQuery的区别，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03
  • javascript创建对象的几种模式介绍

    javascript创建对象的几种模式介绍

    下面小编就为大家带来一篇javascript创建对象的几种模式介绍。小编觉得挺不错的，现在分享给大家，也给大家做个参考
    2016-05-05

最新评论

?


http://www.vxiaotou.com