繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > JavaScript DOM学习第八章 表单错误提示
- Javascript
- jQuery中isFunction方法的BUG修复
- 将函数的实际参数转换成数组的方法
- javascript 删除数组中重复项（uniq）
- js 巧妙去除数组中的重复项
- javascript下一种表单元素获取方法存在的问题
- javascript 三种数组复制方法的性能对比
- js 多层叠的TAB选项卡
- javascript 自动标记来自搜索结果页的关键字
- 起点页面传值js,有空研究学习下
- javascript 的Document属性和方法集合
- JavaScript 使用简略语法创建对象的代码
- 使用JQuery进行跨域请求
- jquery 经典动画菜单效果代码
- jquery 常用操作方法
- js提示信息jtip封装代码，可以是图片或文章
- javascript面向对象的方式实现的弹出层效果代码
- jquery中的sortable排序之后的保存状态的解决方法
- js或css实现滚动广告的几种方案
- 使用JavaScript库还是自己写代码？
- js 右键菜单，支持不同对象不同菜单(兼容IE、Firefox)
Javascript 中的 JavaScript DOM学习第八章 表单错误提示
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2010-02-27 浏览: 44 ::
收藏到网摘: n/a
这一章详细介绍的表单错误提示的方法比那种大多数使用警告框的方法要好的多。 在我看来，警告框只用在浏览器不支持其他显示错误信息的办法的时候。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);
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';
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;
}
对于不支持的浏览器，我们把表单项目的名称和错误信息保存在errorstring里面。这个字符串会在最后弹出。也给他设置hasError属性。
[code] else {
errorstring += obj.name + ': ' + message + '\n';
obj.hasError = true;
}
如果这时候validForm的值还是true那么将firstError设置为现在的元素。以便于将来设置焦点。
复制代码 代码如下:
if (validForm)
firstError = obj;
removeError()
firstError = obj;
removeError()
每一个错误表单项的onchange的事件处理程序都指向这个函数。如果用户修改了相应的表单项，我们礼貌的假设错误已经修正了。因此错误信息应该消失。
首先移除表单项的类中的error项。这个用来移除特别的错误样式。
复制代码 代码如下:
function removeError() {
this.className = this.className.substring(0,this.className.lastIndexOf(' '));
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;
}
最后再做一些清理。设置hasError属性为null，然后移除onchange的事件处理程序。
[code]this.hasError = null;
this.onchange = null;
}
翻译地址：http://www.quirksmode.org/dom/error.html
转载请保留以下信息
作者：北玉(tw:@rehawk)
评论 (0) All
