2014-09-20 82 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