JavaScript DOM学習第8章フォームエラーメッセージ

5862 ワード

警告枠はブラウザが他のエラーメッセージを表示する方法をサポートしていない場合だけです.W 3 Cは、フォームアイテムの近くにエラー情報を表示することを提案します.これはいい方法ですので、ブラウザがこのような高級な方法をサポートしない時だけ警告ダイアログを使います.
例
次の例を試してみます.どれも必須です.また、私は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        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 + '
'; 
  
        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; 
  
}

説明
まずW 3 C DOMを支持するかどうかを堅持します.この例は、mac上のIEで動作することができますが、他のページでは動作しない場合があります.そのブラウザはW 3 C DOMに対するサポートがまだ足りないので、すべての状況に対応できません.
その後、私たちはonsubmitのイベントハンドラを作成しました.このプログラムは私たちの検証関数validationを呼び出します.

 
  
var W3CDOM = (document.getElementsByTagName && document.createElement); 
  
 
  
window.onload = function () { 
  
    document.forms[0].onsubmit = function ()    { 
  
        return validate() 
  
    } 
  
}

validate()
私たちはフォームが検証されたと仮定します.firstError=nullを設定します.最終的には最初のエラー要素に焦点を合わせます.次に文字列を作成します.これはすべてのエラー情報を含んでいます.これはW 3 C DOMブラウザだけです.

 
  
var x = document.forms[0].elements; 
  
for (var i=0;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関数のコアは通常と同じです.あなたが考えているどの順番でも間違いをチェックします.エラーを発見したら、WriteErr()を呼び出して、彼の間違ったフォーム項目とエラー情報を伝えます.
ブラウザがW 3 C DOMをサポートしていない場合は、errorStringを使って警告枠を生成します.警告枠の内容を修正したいかもしれません.


   if (!W3CDOM) 
  
alert(errorstring);

ユーザーに便宜を図るために、最初のエラー要素にフォーカスを設定します.
最後にvalidaFormに戻ります.もしtrueであれば、フォームを提出します.そうでなければ、提出を停止します.
writeError()
この関数は、エラー情報をフォームエントリに出力します.失敗したら、ブラウザがW 3 C DOMをサポートしていないと説明し、その後、エラーストトリミングにエラー情報を送信します.
この関数は、フォームアイテムとエラー情報を伝達します.


   function writeError(obj,message) 
  
{

まず私たちはvalidFormをfalseに設定します.このフォームは正しく書かれていません.提出されるべきではありません.


   validForm = false; 
  
}

フォームの項目にエラーメッセージがあるかどうかを検出します.もしあるならば、validation関数に戻ります.もう一つ同じ項目の後に二つのエラーメッセージがありたくないです.
if(obj.hasError)return;ブラウザがW 3 C DOMをサポートしているかどうかを確認します.


   obj.className += ' error';

続いてエラーフォーム項目にオンチャンゲのイベントハンドラを設定します.


   obj.onchange = removeError;

エラーメッセージにインストールし、クラスを「error」に設定します.CSSに表示するスタイルを設定します.


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

エラー情報を追加するテキストノード.


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

これを対応するフォーム項目に追加して買う(この例ではフォームごとにラベルがある).


   obj.parentNode.appendChild(sp);

最終的には、このフォームにhasErr属性を設定します.この属性は、間違ったフォーム項目を説明するためにも使用できますし、将来にはエラー情報を削除するためにも便利です.


   obj.hasError = sp; 2 } 
  
         ，                  errorstring  。           。     hasError  。 
  
 
  
[code] else { 
  
errorstring += obj.name + ': ' + message + '
'; 
  
obj.hasError = true; 
  
}

この時点でvalidFormの値がtrueであれば、firstErrorを現在の要素に設定します.将来の焦点を設定しやすいようにします.


   if (validForm) 
  
firstError = obj; 
  
removeError()

各エラーフォーム項目のオンチャンゲイベントハンドラはこの関数を指します.ユーザーが対応するフォーム項目を修正したら、私達の礼儀正しい仮説の誤りは修正されました.だからエラーメッセージは消えるべきです.
まず、フォームアイテムのクラスのerror項目を削除します.これは特別なエラースタイルを削除するために使います.


   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
転載は以下の情報を保留してください.
北玉(tw:@rehawk)

Javascript Functionオブジェクト拡張の遅延実行関数