驗證在我的HTML表單在Javascript中？

Question

我有一個用戶名錶單。其中有2個字段，用戶名和密碼。基本上用戶一直在試圖把他們的電子郵件地址登錄，這是一個痛苦，因爲我只希望他們用他們的用戶名而不是電子郵件登錄。

所以我需要它，所以如果用戶試圖把他們的電子郵件地址在用戶名字段，它會顯示一個錯誤，如「使用您的用戶名，而不是電子郵件登錄」。在領域之下。 例如

如果用戶在該字段中輸入「myemail@test.com」並按提交，則會出現錯誤。

我目前也有'必填字段'驗證。

下面是代碼：

JS：

 <script type="text/javascript"> 
    function validar() 
    { 
    var right = 1; 

    if(document.getElementById('email').value.length==0) 
    { 
     right = 0; 
     document.getElementById('emptymail').innerHTML = "Fill in the required fields"; 
    } 
    if(document.getElementById('password').value.length==0) 
    { 
     right = 0; 
     document.getElementById('emptypass').innerHTML = "Fill in the required fields"; 
    } 

    if(right == 1) 
    { 
     document.forms["formu"].submit(); 
    } 

    } 
    </script> 

FORM：

<div id="sessionContainer" class="clearfix"> 
    <div class="content"> 
    <form action="goto.php" class=" sign-in" method="post" name="formu" id="formu"> 
     <div style="margin:0;padding:0"></div> 
     <h3>Please login</h3> 
     <div class="clearfix"> 
     <label for="">Username</label><br> 
     <input class="xlarge" id="email" name="email" tabindex="1" type="text" value="" /><div id="emptymail"></div> 
     </div> 
     <div class="clearfix"> 
     <label for=""><br> 
      Password</label><br> 
     <input class="xlarge" id="password" name="password" tabindex="2" type="password" value="" /><div id="emptypass"></div> 
     </div> 


     <p class="remember">&nbsp;</p> 
     <p class="remember"> 
     <button class="btn btn-m btn-blue" id="signin_submit" name="commit" type="button" tabindex=5 onclick="validar();">Sign in</button> 
     </p> 

感謝

Answer 1

首先，它是光輝的命名，不應該包含一封用戶名字段郵件地址「email」。不管怎麼說，

function validar() 
{ 
    if(document.getElementById('email').value.length==0) 
    { 
     document.getElementById('emptymail').innerHTML = "Fill in the required fields"; 
     return; 
    } 
    if(document.getElementById('password').value.length==0) 
    { 
     document.getElementById('emptypass').innerHTML = "Fill in the required fields"; 
     return; 
    } 
    var x=document.getElementById('email').value; 
    var atpos=x.indexOf("@"); 
    var dotpos=x.lastIndexOf("."); 
    if (!(atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)) 
    { 
     document.getElementById('email').focus(); 
     document.getElementById('emptymail').innerHTML = "Use your username, not email to login"; 
     return; 
    } 

    document.forms["formu"].submit(); 

} 

這應該做到這一點。