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 相关文章推荐
如何制作浮动广告 JavaScript制作浮动广告代码
Dec 30 Javascript
THREE.JS入门教程(1)THREE.JS使用前了解
Jan 24 Javascript
js实现顶部可折叠的菜单工具栏效果实例
May 09 Javascript
JavaScript模拟可展开、拖动与关闭的聊天窗口实例
May 12 Javascript
JS实现从顶部下拉显示的带动画QQ客服特效代码
Oct 24 Javascript
浅谈在js传递参数中含加号(+)的处理方式
Oct 11 Javascript
浅析上传头像示例及其注意事项
Dec 14 Javascript
javaScript 逻辑运算符使用技巧整理
May 03 Javascript
聊聊那些使用前端Javascript实现的机器学习类库
Sep 18 Javascript
对Vue.js之事件的绑定(v-on: 或者 @ )详解
Sep 15 Javascript
关于vue-cli 3配置打包优化要点(推荐)
Apr 22 Javascript
vue项目中使用eslint+prettier规范与检查代码的方法
Jan 16 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
玩转虚拟域名◎+ .
2006/10/09 PHP
PHP命名空间(namespace)的动态访问及使用技巧
2014/08/18 PHP
php实现检查文章是否被百度收录
2015/01/27 PHP
php实现的IMEI限制的短信验证码发送类
2015/05/05 PHP
PHP面向对象程序设计重载(overloading)操作详解
2019/06/13 PHP
javascript中parentNode,childNodes,children的应用详解
2013/12/17 Javascript
jquery中的$(document).ready()使用小结
2014/02/14 Javascript
jQuery Validate 验证,校验规则写在控件中的具体实例
2014/02/27 Javascript
jQuery插件 Jqplot图表实例
2016/06/18 Javascript
AngularJS基础 ng-list 指令详解及示例代码
2016/08/02 Javascript
浅谈jQuery中的$.extend方法来扩展JSON对象
2017/02/12 Javascript
jQuery实现导航栏头部菜单项点击后变换颜色的方法
2017/07/19 jQuery
React-Native 组件之 Modal的使用详解
2017/08/08 Javascript
详解angular脏检查原理及伪代码实现
2018/06/08 Javascript
浅谈Vue.js路由管理器 Vue Router
2018/08/16 Javascript
vue src动态加载请求获取图片的方法
2018/10/17 Javascript
JavaScript数据结构与算法之二叉树遍历算法详解【先序、中序、后序】
2019/02/21 Javascript
Vue项目引发的「过滤器」使用教程
2019/03/12 Javascript
前后端常见的几种鉴权方式(小结)
2019/08/04 Javascript
js实现验证码干扰(动态)
2021/02/23 Javascript
Python自动化运维_文件内容差异对比分析
2017/12/13 Python
python pygame模块编写飞机大战
2018/11/20 Python
python 内置模块详解
2019/01/01 Python
Python简易版停车管理系统
2019/08/12 Python
python orm 框架中sqlalchemy用法实例详解
2020/02/02 Python
python之随机数函数的实现示例
2020/12/30 Python
美国摩托车头盔、零件、齿轮及配件商店:Cycle Gear
2019/06/12 全球购物
医学院学生的自我评价分享
2013/11/19 职场文书
大学生的应聘自我评价
2013/12/13 职场文书
工地安全检查制度
2014/02/04 职场文书
党员干部批评与自我批评反四风思想汇报
2014/09/21 职场文书
铁路安全反思材料
2014/12/24 职场文书
街道党风廉政建设调研报告
2015/01/01 职场文书
《7的乘法口诀》教学反思
2016/02/18 职场文书
《小蝌蚪找妈妈》教学反思
2016/02/23 职场文书
python实现剪贴板的操作
2021/07/01 Python