0

この関数は検証用です。空の場合はエラーが表示され、テキスト ボックスの横に OK メッセージと共に赤または緑が表示されます。

JavaScript

 function validatebox()
 {
     var fn = document.geElementById("fn").value;
     if (fn==null || fn=="")
     {
         document.geElementById("error_fn").innerHTML="please fill your first name";
         document.geElementById("error_fn").style.color="red";
     }
     else
     {
         document.geElementById("error_fn").innerHTML="OK";
         document.geElementById("error_fn").style.color="green";
     }

テキスト ボックスの横にエラー メッセージを表示しようとしていますが、うまくいきません。

HTML

 <form  name="signup" action="singup_i" method="post">
   First name:
   <input type="text" id="fn" onblur="validatebox()" name="fn"  size="15"/> 
   <label id="error_fn"></label>
   <input type="submit" value="submit"> <input type="reset" value="reset">
 </from>
4

2 に答える 2

7

3 つの問題:

  1. ではなくgetElementById( に注意してください)です。tgeElementById

  2. }関数の末尾がありません。

  3. フォームの終了タグは</from>、ではなく</form>

お使いのブラウザーは、少なくとも最初の 2 つについておそらく説明していたでしょう。最近のすべてのブラウザーには、開発/デバッグ ツールの完全なセットがあります。IE と Chrome (少なくとも) の場合は、F12 を押すだけです。それ以外の方はメニューをご覧ください。

それらを修正すると機能します。ライブソース

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Example</title>
</head>
<body>
 <form  name="signup" action="singup_i" method="post">
First name:<input type="text" id="fn" onblur="validatebox()" name="fn"  size="15"/> 
              <label id="error_fn"></label>
         <input type="submit" value="submit"> <input type="reset" value="reset">
</from>
<script>
function validatebox() {

    var fn = document.getElementById("fn").value;
    if (fn == null || fn == "") {
        document.getElementById("error_fn").innerHTML = "please fill your first name";
        document.getElementById("error_fn").style.color = "red";
    }
    else {
        document.getElementById("error_fn").innerHTML = "OK";
        document.getElementById("error_fn").style.color = "green";
    }
}
</script>
</body>
</html>

関数コードを少し再フォーマットしたため、ブロックが見やすくなっていることに注意してください (したがって、最後の が表示されます})。

error_fnしかし、繰り返し検索しlabelたり、フィールドにラベルを付ける以外の目的で要素を使用したりしないことを提案できますか? ライブソース

<form  name="signup" action="singup_i" method="post">
 First name:<input type="text" id="fn" onblur="validatebox()" name="fn"  size="15"/> 
               <span id="error_fn"></span>
          <input type="submit" value="submit"> <input type="reset" value="reset">
</form>
<script>
function validatebox() {

    var fn = document.getElementById("fn").value;
    var err = document.getElementById("error_fn");
    if (fn == null || fn == "") {
        err.innerHTML = "please fill your first name";
        err.style.color = "red";
    }
    else {
        err.innerHTML = "OK";
        err.style.color = "green";
    }
}
</script>

最後に、テキスト フィールドのプロパティがにfnなることはないnullため、になることはありません。それは常に文字列です。文字列は空白の場合があります。この場合、最も簡単なテストは です。これは、、、、、または(は常に文字列であるため、そのうちの のみ可能です)かどうかをテストします。もちろん、（スペース）はそれを通り越します。valuenullif (!fn) { /* missing */ } else { /* present */}fnnullundefined0""falseNaN""value" "

于 2013-07-23T14:00:07.870 に答える