JavaScript DOM学習 第8章 フォームエラープロンプト_基礎知識

私の考えでは、警告ボックスはブラウザがエラー メッセージを表示する他の方法をサポートしていない場合にのみ使用されます。 W3C は、フォーム項目の近くにエラー メッセージを表示することを推奨しています。これは優れたアプローチであるため、ブラウザがこの高度なアプローチをサポートしていない場合にのみ警告ダイアログを使用します。
例
以下の例を試してください。各項目は必須です。また、電子メール項目に @ 記号が付いているかどうかも強調します。そうでない場合は、エラー メッセージが表示されます。

コードをコピー コードは次のとおりです。

var W3CDOM = (document.getElementsByTagName && document .createElement) ;

window.onload = function () {
document.forms[0].onsubmit = function () {
return validate()
}
}

関数 validate() {
validForm = true;
エラー文字列 = ''; for (var i=0;i if (!x[i].value)
writeError(x[i],'このフィールドは必須です'); }
if (x['email'].value.indexOf('@') == -1)
writeError(x['email'],'これは有効なメール アドレスではありません'); ' ); 🎜> return false;

function writeError(obj,message) {
if (obj.hasError) return; {
obj.className = ' error';
obj.onchange = RemoveError;
var sp = document.createElement('span');
obj .parentNode.appendChild(sp); ' メッセージ 'n';
obj.hasError = true;
if (!firstError)
}

関数 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 を十分にサポートしておらず、すべての状況に対応できないためです。

次に、検証関数 validation() を呼び出す onsubmit イベント ハンドラーを作成します。





コードをコピー


コードは次のとおりです。


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 if (!x[i].value)
writeError(x[i],'このフィールドは必須です');
}
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 が返される場合は、フォームを送信します。そうでない場合は、送信を中止します。

writeError()
この関数はフォームアイテムにエラー情報を出力するために使用されます。失敗した場合は、ブラウザが W3C DOM をサポートしていないことを意味し、エラー メッセージが errorstring に送信されます。
この関数はフォーム項目とエラーメッセージを渡します。

コードをコピーします コードは次のとおりです。

function writeError(obj,message)
{

まず、validForm を false に設定します。このフォームは正しく入力されていないため、送信すべきではありません。

コードをコピーします コードは次のとおりです。

validForm = false;
}

次に、フォーム項目に既にエラー メッセージがあるかどうかを確認します。その場合は、validation() 関数に戻ります。同じ項目の後に 2 つのエラー メッセージが表示されるのは望ましくありません。

if (obj.hasError) return; ブラウザが W3C DOM をサポートしているかどうかを確認します:

コードをコピー コードは次のとおりです:

obj.className = ' error';

次に、エラー フォーム項目の onchange イベント ハンドラーを設定します:

コードをコピーします コードは次のとおりです:

obj.onchange = removeError;

エラーメッセージを表示し、そのクラスを「error」に設定します。 CSSで表示するスタイルを設定します。

コードをコピー コードは次のとおりです。

var sp = document.createElement('span ');
sp.className = 'error';

エラー メッセージ テキスト ノードを に追加します。

コードをコピー コードは次のとおりです。

sp.appendChild(document.createTextNode(message) ));

次に、この を対応するフォーム項目に追加します (この例では、各フォーム項目に

タグがあります)。

コードをコピーします コードは次のとおりです。

obj.parentNode.appendChild(sp);

最後に、このフォームに hasError 属性を設定します。この属性は、間違ったフォーム項目を示すためと、将来のエラー メッセージの削除を容易にするために使用できます。

コードをコピーします コードは次のとおりです。

obj.hasError = sp; 🎜>サポートしていないブラウザの場合、フォーム項目の名前とエラーメッセージがエラー文字列に保存されます。この文字列が最後に表示されます。また、彼に hasError 属性を設定します。

[コード] else {
errorstring = obj.name ': ' メッセージ 'n';
obj.hasError = true;
この時点で validForm の値がまだ true の場合は、firstError を現在の要素に設定します。将来的に焦点を設定しやすくするため。

コードをコピー コードは次のとおりです。

if (validForm)
firstError = obj;
removeError()

各エラー フォーム項目の onchange イベント ハンドラーは、この関数を指します。ユーザーが対応するフォームフィールドを変更した場合、エラーは修正されたものと丁寧にみなします。したがって、エラーメッセージは消えるはずです。

まず、フォーム項目のクラスからエラー項目を削除します。これは、特定のエラー スタイルを削除するために使用されます。

コードをコピー コードは次のとおりです。

function RemoveError() {
this .className = this.className.substring(0,this.className.lastIndexOf(' '));

次に、エラー メッセージを削除します。 hasError 属性は情報を含む を指しているため、フォーム項目の親要素から削除します。

コードをコピー コードは次のとおりです。

this.parentNode.removeChild(this.hasError );
最後に掃除をします。 hasError プロパティを null に設定し、onchange イベント ハンドラーを削除します。

[code]this.hasError = null;
this.onchange = null;

翻訳アドレス: http://www.quirksmode .org/dom/error.html

転載のために以下の情報を保管してください
著者: Beiyu (tw:@rehawk)