私のhtmlページのパネルにエラーメッセージを表示します

Question

パスワードやユーザー名、住所など、ユーザーが入力した情報に基づいてHTMLページに一連のエラーメッセージを出力したい検証。

私のコードは次のようになります。

function validate(){ 
     var x,y,z; 
     x = document.getElementById("name").value; 
     if (x.length<6){ 
       text="user name too short"; 
     } else { 
      text="validated"; 
     }  
     document.getElementById("aka").innerHTML = text; 
    } 

今、私は一つだけ入力を検証することができます。この場合、idは "name"の入力です。
この機能でもパスワードのようなすべての入力を検証したいと思います。

どうすればこの機能に実装できますか？

さらにステートメントの後に別のdocument.getElementById("aka").innerHTML = textが追加されましたが、最初は印刷されませんでした。

Answer 1

変数を作成し、そこにすべてのエラーメッセージを挿入します。終了したら、その変数の値を目的の要素のinnerHTMLに入れます。

function validate(){ 
    var x, errors = ""; 

    x = document.getElementById("name").value; 
    if (x.length<6){ 
      errors += "user name too short<br />"; 
    } 

    x = document.getElementById("password").value; 
    if (x.length<6){ 
      errors += "password too short<br />"; 
    } 

    document.getElementById("aka").innerHTML = errors; 
} 

Answer 2

あなたはテキスト変数内のすべてのメッセージを保存するか、次のように

その他のオプションは、DOM functionsを使用することでしょう

var text = ""; 
if (x.length<6){ 
    text+="user name too short"; 
} 

if(y.lenght<6) { 
    text+= 'pwd too short'; 
}  
document.getElementById("aka").innerHTML = text; 

：

document.appendChild(document.createTextNode(text)); 

var text =""; 
 
text += "user name too short"; 
 
text += "<br/>pwd too short"; 
 

 
document.getElementById('out1').innerHTML=text; 
 

 

 
document.getElementById('out2').appendChild(document.createTextNode('user name too short')); 
 
document.getElementById('out2').appendChild(document.createTextNode('pwd too short'));

<div id="out1"></div> 
 
<div id="out2"></div>