2014-09-20 122 views
0

以下是我自己學習Javascript的代碼,並且想知道如何驗證我的代碼以使文本框表示類似於「請輸入值」或「請輸入有效的用戶名或密碼。驗證文本框Javascript

我已經嘗試,但是這是據我已經爲它做了在線搜索。

<head> 
     <script type = 'text/javascript'> 
    function nullcheck() 
     { 
     if(document.getElementById("").value==="") 
     { 
      alert("Please enter value."); 
      return false; 
     } 
     } 
    </script> 
     <title>Login Form</title> 
     <link rel="stylesheet" href="css/style.css"/> 

    </head> 

    <body> 
     <section class="container"> 
     <div class="login"> 
      <h1>Login</h1> 
      <form method="post" action="index.xhtml"> 
      <p><input type="text" name="login" value="" id="Username or Email" /></p> 
      <p><input type="password" name="password" value="" id="Password"/></p> 
      <p class="remember_me"> 
       <label> 
       <input type="checkbox" name="remember_me" id="remember_me"/> 
       Remember me on this computer 
       </label> 
      </p> 
      <p class="submit"><input type="submit" name="commit" value="Login" onchange="nullcheck()"/><button type="reset" value="Clear">Clear</button></p> 

      </form> 
     </div> 

     </section> 

    </body> 

    </htm 
+0

輸入支持'onchange'事件。請注意'id's不應該包含任何空格或特殊字符,並且總是小寫。 – 2014-09-20 00:21:16

回答

0

您可以驗證的項目之一,在一段時間,但更普遍的解決辦法是寫一個validate()功能。使您的表單元素看起來像這樣:

<form method="post" action="index.xhtml" onsubmit="return validate();"> 

如果validate()函數返回false,則表單將不會被提交。這是達validate()功能發出提示,等

採樣功能:

function validate() { 
var error = false, 
    errmsg=""; 
    if(document.getElementById("username").value==="") { 
     error = true; 
     errmsg = "User name may not be blank.\n"; 
    } 
    if(document.getElementById("password").value==="") { 
     error = true; 
     errmsg = "Password may not be blank.\n"; 
    } 
    if (error) { 
     alert(errmsg); 
     return false; 
    } else { 
     return true; 
    } 
} // validate 
+0

這很棒,但我怎樣才能讓它出現? – user3741806 2014-09-20 02:36:42

+0

把它放在你現在有nullcheck()的HTML文件中,並確保表單中的id =屬性與'document.getElementById()'中的屬性匹配。 – 2014-09-20 04:53:34

+0

不要忘了使用'

'也是。 – 2014-09-20 05:05:04