JavaScript DOM學(xué)習(xí)第八章 表單錯誤提示
更新時(shí)間：2010年02月19日 13:53:39 作者：
這一章詳細(xì)介紹的表單錯誤提示的方法比那種大多數(shù)使用警告框的方法要好的多。
在我看來，警告框只用在瀏覽器不支持其他顯示錯誤信息的辦法的時(shí)候。W3C建議我們在表單項(xiàng)的附近顯示錯誤信息。這是一種很好的辦法，所以我們只在瀏覽器不支持這種高級的辦法的時(shí)候才使用警告對話框。
例子
試試下面的例子。每一項(xiàng)都是必須的。另外我會堅(jiān)持email項(xiàng)是否有@符號。如果沒有也會提示錯誤信息。
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;
}
解釋
首先我們堅(jiān)持是否支持W3C DOM。這個例子能夠在mac上的IE工作，但是如果在其他頁面上不能工作很正常。因?yàn)槟莻€瀏覽器對W3C DOM的支持還不夠，不能應(yīng)對所有情況。
然后我們創(chuàng)建了onsubmit的事件處理程序，這個程序調(diào)用我們的驗(yàn)證函數(shù)validation()。
var W3CDOM = (document.getElementsByTagName && document.createElement);
window.onload = function () {
document.forms[0].onsubmit = function () {
return validate()
}
}
validate()
我們假設(shè)表單是驗(yàn)證通過了的（validForm=true），我們設(shè)置firstError=null。最終我們會給第一個錯誤元素一個焦點(diǎn)。然后創(chuàng)建一個字符串：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()函數(shù)的核心和平常的一樣。按照你想的任何順序檢查錯誤。當(dāng)你發(fā)現(xiàn)了一個錯誤，調(diào)用writeError()然后傳遞給他錯誤的表單項(xiàng)和錯誤信息。
如果瀏覽器不支持W3C DOM，那就用errorString生成一個警告框。你或許想修改一下警告框的內(nèi)容。
為了給用戶方便，把焦點(diǎn)設(shè)置在第一個錯誤的元素上。
最后返回validaForm，如果還是true就提交表單，如果不是就停止提交。
writeError()
這個函數(shù)用來把錯誤信息輸出到表單項(xiàng)上。如果失敗，說明瀏覽器不支持W3C DOM，然后就把錯誤信息發(fā)送到errorstring。
這個函數(shù)會傳遞一個表單項(xiàng)和一條錯誤信息。
首先我們設(shè)置validForm為false：這個表單填寫不正確，不應(yīng)該被提交。
然后檢測表單項(xiàng)是否已經(jīng)有了一個錯誤提示。如果有了，就返回到validation()函數(shù)，我可不想再同一項(xiàng)后面有兩個錯誤提示。
if (obj.hasError) return;檢查瀏覽器是否支持W3C DOM：
接著給錯誤表單項(xiàng)設(shè)置一個onchange的事件處理程序：
創(chuàng)建一個<span>來裝在錯誤信息，并且設(shè)置它的類為"error"。在CSS里面設(shè)置要呈現(xiàn)的樣式。
給<span>添加一個錯誤信息的文本節(jié)點(diǎn)。
然后把這個<span>添加到相應(yīng)的表單項(xiàng)后買（在這個例子中，每個表單項(xiàng)都有一個<p>標(biāo)簽）。
最終，給這個表單設(shè)置hasError屬性。這個屬性既可以用來說明有錯誤的表單項(xiàng)也可以方便將來移除錯誤信息。
如果這時(shí)候validForm的值還是true那么將firstError設(shè)置為現(xiàn)在的元素。以便于將來設(shè)置焦點(diǎn)。
每一個錯誤表單項(xiàng)的onchange的事件處理程序都指向這個函數(shù)。如果用戶修改了相應(yīng)的表單項(xiàng)，我們禮貌的假設(shè)錯誤已經(jīng)修正了。因此錯誤信息應(yīng)該消失。
首先移除表單項(xiàng)的類中的error項(xiàng)。這個用來移除特別的錯誤樣式。
然后移除錯誤信息。hasError屬性指向包含該信息的<span>，所以我們從表單項(xiàng)的父元素移除它。
翻譯地址：http://www.quirksmode.org/dom/error.html
轉(zhuǎn)載請保留以下信息
作者：北玉(tw:@rehawk)
例子
試試下面的例子。每一項(xiàng)都是必須的。另外我會堅(jiān)持email項(xiàng)是否有@符號。如果沒有也會提示錯誤信息。
復(fù)制代碼 代碼如下:
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;
}
解釋
首先我們堅(jiān)持是否支持W3C DOM。這個例子能夠在mac上的IE工作，但是如果在其他頁面上不能工作很正常。因?yàn)槟莻€瀏覽器對W3C DOM的支持還不夠，不能應(yīng)對所有情況。
然后我們創(chuàng)建了onsubmit的事件處理程序，這個程序調(diào)用我們的驗(yàn)證函數(shù)validation()。
復(fù)制代碼 代碼如下:
var W3CDOM = (document.getElementsByTagName && document.createElement);
window.onload = function () {
document.forms[0].onsubmit = function () {
return validate()
}
}
validate()
我們假設(shè)表單是驗(yàn)證通過了的（validForm=true），我們設(shè)置firstError=null。最終我們會給第一個錯誤元素一個焦點(diǎn)。然后創(chuàng)建一個字符串：errorstring，這個包含所有的錯誤信息。這個只針對W3C DOM瀏覽器。
復(fù)制代碼 代碼如下:
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()函數(shù)的核心和平常的一樣。按照你想的任何順序檢查錯誤。當(dāng)你發(fā)現(xiàn)了一個錯誤，調(diào)用writeError()然后傳遞給他錯誤的表單項(xiàng)和錯誤信息。
如果瀏覽器不支持W3C DOM，那就用errorString生成一個警告框。你或許想修改一下警告框的內(nèi)容。
復(fù)制代碼 代碼如下:
if (!W3CDOM)
alert(errorstring);
alert(errorstring);
為了給用戶方便，把焦點(diǎn)設(shè)置在第一個錯誤的元素上。
最后返回validaForm，如果還是true就提交表單，如果不是就停止提交。
writeError()
這個函數(shù)用來把錯誤信息輸出到表單項(xiàng)上。如果失敗，說明瀏覽器不支持W3C DOM，然后就把錯誤信息發(fā)送到errorstring。
這個函數(shù)會傳遞一個表單項(xiàng)和一條錯誤信息。
復(fù)制代碼 代碼如下:
function writeError(obj,message)
{
{
首先我們設(shè)置validForm為false：這個表單填寫不正確，不應(yīng)該被提交。
復(fù)制代碼 代碼如下:
validForm = false;
}
}
然后檢測表單項(xiàng)是否已經(jīng)有了一個錯誤提示。如果有了，就返回到validation()函數(shù)，我可不想再同一項(xiàng)后面有兩個錯誤提示。
if (obj.hasError) return;檢查瀏覽器是否支持W3C DOM：
復(fù)制代碼 代碼如下:
obj.className += ' error';
接著給錯誤表單項(xiàng)設(shè)置一個onchange的事件處理程序：
復(fù)制代碼 代碼如下:
obj.onchange = removeError;
創(chuàng)建一個<span>來裝在錯誤信息，并且設(shè)置它的類為"error"。在CSS里面設(shè)置要呈現(xiàn)的樣式。
復(fù)制代碼 代碼如下:
var sp = document.createElement('span');
sp.className = 'error';
sp.className = 'error';
給<span>添加一個錯誤信息的文本節(jié)點(diǎn)。
復(fù)制代碼 代碼如下:
sp.appendChild(document.createTextNode(message));
然后把這個<span>添加到相應(yīng)的表單項(xiàng)后買（在這個例子中，每個表單項(xiàng)都有一個<p>標(biāo)簽）。
復(fù)制代碼 代碼如下:
obj.parentNode.appendChild(sp);
最終，給這個表單設(shè)置hasError屬性。這個屬性既可以用來說明有錯誤的表單項(xiàng)也可以方便將來移除錯誤信息。
復(fù)制代碼 代碼如下:
obj.hasError = sp; 2 }
對于不支持的瀏覽器，我們把表單項(xiàng)目的名稱和錯誤信息保存在errorstring里面。這個字符串會在最后彈出。也給他設(shè)置hasError屬性。
[code] else {
errorstring += obj.name + ': ' + message + '\n';
obj.hasError = true;
}
對于不支持的瀏覽器，我們把表單項(xiàng)目的名稱和錯誤信息保存在errorstring里面。這個字符串會在最后彈出。也給他設(shè)置hasError屬性。
[code] else {
errorstring += obj.name + ': ' + message + '\n';
obj.hasError = true;
}
如果這時(shí)候validForm的值還是true那么將firstError設(shè)置為現(xiàn)在的元素。以便于將來設(shè)置焦點(diǎn)。
復(fù)制代碼 代碼如下:
if (validForm)
firstError = obj;
removeError()
firstError = obj;
removeError()
每一個錯誤表單項(xiàng)的onchange的事件處理程序都指向這個函數(shù)。如果用戶修改了相應(yīng)的表單項(xiàng)，我們禮貌的假設(shè)錯誤已經(jīng)修正了。因此錯誤信息應(yīng)該消失。
首先移除表單項(xiàng)的類中的error項(xiàng)。這個用來移除特別的錯誤樣式。
復(fù)制代碼 代碼如下:
function removeError() {
this.className = this.className.substring(0,this.className.lastIndexOf(' '));
this.className = this.className.substring(0,this.className.lastIndexOf(' '));
然后移除錯誤信息。hasError屬性指向包含該信息的<span>，所以我們從表單項(xiàng)的父元素移除它。
復(fù)制代碼 代碼如下:
this.parentNode.removeChild(this.hasError);
最后再做一些清理。設(shè)置hasError屬性為null，然后移除onchange的事件處理程序。
[code]this.hasError = null;
this.onchange = null;
}
最后再做一些清理。設(shè)置hasError屬性為null，然后移除onchange的事件處理程序。
[code]this.hasError = null;
this.onchange = null;
}
翻譯地址：http://www.quirksmode.org/dom/error.html
轉(zhuǎn)載請保留以下信息
作者：北玉(tw:@rehawk)
您可能感興趣的文章:
- 表單JS彈出填寫提示效果代碼
- 實(shí)用的JS表單驗(yàn)證提示效果
- javascript寫的一個表單動態(tài)輸入提示的代碼
- js+css實(shí)現(xiàn)增加表單可用性之提示文字
- js下在password表單內(nèi)顯示提示信息的解決辦法
- js實(shí)現(xiàn)表單檢測及表單提示的方法
- javascript中IE瀏覽器不支持NEW DATE()帶參數(shù)的解決方法
- IE8的JavaScript點(diǎn)擊事件(onclick)不兼容的解決方法
- 讓ie運(yùn)行js時(shí)提示允許阻止內(nèi)容運(yùn)行的解決方法
- Javascript在IE下設(shè)置innerHTML時(shí)出現(xiàn)未知的運(yùn)行時(shí)錯誤的解決方法
- JavaScript的常見兼容問題及相關(guān)解決方法(chrome/IE/firefox)
- IE瀏覽器下JS腳本提交表單后，不能自動提示問題解決方法
相關(guān)文章
MVC+Layui彈出表單模態(tài)框的實(shí)現(xiàn)代碼
這篇文章主要介紹了MVC+Layui彈出表單模態(tài)框的實(shí)現(xiàn)代碼,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-01-01
Javascript學(xué)習(xí)筆記之 函數(shù)篇（一） : 函數(shù)聲明和函數(shù)表達(dá)式
function 是 Javascript 中的第一類對象，這就意味著函數(shù)可以像其他值一樣被傳遞。一個最常見的用法就是將一個匿名函數(shù)作為回調(diào)函數(shù)傳遞到另外一個異步函數(shù)中。2014-06-06
探討JavaScript中的Rest參數(shù)和參數(shù)默認(rèn)值
這篇文章的主要介紹了JavaScript中的Rest參數(shù)和參數(shù)默認(rèn)值，內(nèi)容很充實(shí),需要了解的朋友可以參考下2015-07-07
Ruffy javascript 學(xué)習(xí)筆記
Ruffy javascript 學(xué)習(xí)筆記2009-11-11
javascript常見用法，比如，編碼解碼、間隔及掩飾執(zhí)行、檢查輸入是否為數(shù)字、獲取、創(chuàng)建和刪除節(jié)點(diǎn)等等2014-05-05
下面小編就為大家?guī)硪黄狫avaScript核心語法總結(jié)(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
簡單介紹JavaScript的變量和數(shù)據(jù)類型
這篇文章主要介紹了簡單介紹JavaScript的變量和數(shù)據(jù)類型,是JS入門中的基礎(chǔ)知識,需要的朋友可以參考下2015-06-06
下面小編就為大家?guī)硪黄狫avaScript:Date類型全面解析。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧，祝大家游戲愉快哦2016-05-05
這篇文章主要介紹了JavaScript的RequireJS庫入門指南,RequireJS庫的人氣近來攀升很快,需要的朋友可以參考下2015-07-07
Js從頭學(xué)起（基本數(shù)據(jù)類型和引用類型的參數(shù)傳遞詳細(xì)分析）
Js中所有函數(shù)的參數(shù)傳遞都是按值傳遞的，也就是把函數(shù)外面的值復(fù)制給函數(shù)內(nèi)部的參數(shù)，就和把值從一個變量復(fù)制到另一個變量一樣。下面舉幾個特別的例子2012-02-02