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


Posted in Javascript onFebruary 19, 2010

在我看来,警告框只用在浏览器不支持其他显示错误信息的办法的时候。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 相关文章推荐
面向对象设计模式的核心法则
Nov 10 Javascript
点击显示指定元素隐藏其他同辈元素的方法
Feb 19 Javascript
jquery防止重复执行动画避免页面混乱
Apr 22 Javascript
js与C#进行时间戳转换
Nov 14 Javascript
JavaScript实现自动生成网页元素功能(按钮、文本等)
Nov 21 Javascript
SublimeText自带格式化代码功能之reindent
Dec 27 Javascript
jQuery DateTimePicker 日期和时间插件示例
Jan 22 Javascript
微信小程序之数据双向绑定与数据操作
May 12 Javascript
angular1.x ui-route传参的三种写法小结
Aug 31 Javascript
微信小程序实现顶部下拉菜单栏
Nov 04 Javascript
vue elementUI table表格数据 滚动懒加载的实现方法
Apr 04 Javascript
详解ES6中class的实现原理
Oct 03 Javascript
JavaScript DOM 学习第七章 表单的扩展
Feb 19 #Javascript
JavaScript DOM学习第六章 表单实例
Feb 19 #Javascript
JavaScript DOM 学习第五章 表单简介
Feb 19 #Javascript
JavaScript DOM学习第四章 getElementByTagNames
Feb 19 #Javascript
JavaScript DOM 学习第三章 内容表格
Feb 19 #Javascript
JavaScript DOM 学习第二章 编辑文本
Feb 19 #Javascript
JavaScript DOM学习第一章 W3C DOM简介
Feb 19 #Javascript
You might like
用PHP的超级变量$_GET获取HTML表单(Form) 数据
2011/05/07 PHP
PHP 正则表达式之正则处理函数小结(preg_match,preg_match_all,preg_replace,preg_split)
2012/10/05 PHP
php实现图片上传并进行替换操作
2016/03/15 PHP
laravel 验证错误信息到 blade模板的方法
2019/09/29 PHP
laravel实现于语言包的完美切换方法
2019/09/29 PHP
JavaScript 创建对象
2009/07/17 Javascript
jQuery UI-Draggable 参数集合
2010/01/10 Javascript
js 字符串转化成数字的代码
2011/06/29 Javascript
JQuery的自定义事件代码,触发,绑定简单实例
2013/08/01 Javascript
js插件方式打开pdf文件(浏览器pdf插件分享)
2013/12/20 Javascript
javascript基础语法学习笔记
2016/01/04 Javascript
动态更新highcharts数据的实现方法
2016/05/28 Javascript
JS鼠标3次点击事件实现代码及扩展思路
2017/09/12 Javascript
浅谈在Vue-cli里基于axios封装复用请求
2017/11/06 Javascript
python实现的二叉树算法和kmp算法实例
2014/04/25 Python
举例讲解Python程序与系统shell交互的方式
2015/04/09 Python
Python随机生成数模块random使用实例
2015/04/13 Python
完美解决python遍历删除字典里值为空的元素报错问题
2016/09/11 Python
使用Python写一个贪吃蛇游戏实例代码
2017/08/21 Python
python如何获取列表中每个元素的下标位置
2019/07/01 Python
把django中admin后台界面的英文修改为中文显示的方法
2019/07/26 Python
Python数据可视化实现正态分布(高斯分布)
2019/08/21 Python
python列表推导式入门学习解析
2019/12/02 Python
python小项目之五子棋游戏
2019/12/26 Python
python基于pexpect库自动获取日志信息
2021/02/01 Python
基于Canvas+Vue的弹幕组件的实现
2019/07/23 HTML / CSS
Html5页面上如何禁止手机虚拟键盘弹出
2020/03/19 HTML / CSS
Kipling凯浦林美国官网:世界著名时尚休闲包袋品牌
2016/08/24 全球购物
Envie de Fraise意大利:法国网上推出的孕妇装品牌
2020/10/18 全球购物
汽车机修工岗位职责
2014/03/06 职场文书
租车协议书范本
2014/04/22 职场文书
寻找最美家庭活动方案
2014/08/20 职场文书
与美同行演讲稿
2014/09/13 职场文书
2014年社区妇联工作总结
2014/12/02 职场文书
2015年采购工作总结
2015/04/10 职场文书
Nginx的gzip相关介绍
2022/05/11 Servers