悬停时验证登录名和密码

Validating login and password on hover

本文关键字：密码 登录 验证 悬停      更新时间：2023-09-26

MY HTML

<p id="login" onmouseover="showForm();" onmouseout="hideForm();"><span class="label">Login / Register</span>
              <span id="loginForm">        
                  <span class="form-elements">
                  <span class="form-label">Name:</span>
                  <span class="form-field">
                  <input type="text" id= "login1" onsubmit= "showform()"/>
                  </span> </span>        
                  <span class="form-elements">
                  <span class="form-label">Password:</span>
                  <span class="form-field">
                  <input type="password" id= "password1" onsubmit= "showform()"/>
                  </span> </span>        
                  <span class="form-elements">
                  <span class="submit-btn">
                  <input type="submit" value=" Submit " /></span> 
                  <a href="register.html"><button type="button" class="swd-button">Register</button></a>
                </span>
                </span></p>

My javascript 

function showForm(){
    document.getElementById('loginForm').style.display = "block";
}
function hideForm(){
    document.getElementById('loginForm').style.display = "none";
}

我的验证检查

    var isValid = true;
                var login1 = document.getElementById('login1').value;
var password1 = document.getElementById('password1').value;
                if(login1 == null ||login1 == "")
                {   
                    document.getElementById("errorusername").innerHTML="[Please type something!]";
                    isValid = false;
                }
                if(password1 == null || password1 == "")
                {   
                    document.getElementById("errorpassword").innerHTML="[Please type something!]";  
                    isValid = false;
                }
                return isValid;

我想做的是验证登录名和密码。也就是用户不能只放空。其他的都可以。但是我的showform已经是一个函数了。我把验证放在哪里。嗯，我试着把它放在showform()里面，它似乎不工作

这就是代码，但是您还有一些需要解决的问题。

function validate(){
    document.getElementById('failed').innerHTML = "";
    var isValid = true;
    var login1 = document.getElementById('login1').value;
    var password1 = document.getElementById('password1').value;
    if(login1 == null ||login1 == "")
    {   
        document.getElementById('login1').value="Type Something";
        isValid = false;
    };
    if(password1 == null || password1 == "")
    {   
        document.getElementById('failed').innerHTML = "NEED A PASSWORD!";  
        isValid = false;
    };
};

我也改变了你的HTML…

<p id="login"><span class="label">Login / Register</span>
<span id="loginForm">        
<span class="form-elements">
<span class="form-label">Name:</span>
<span class="form-field">
<input type="text" id= "login1" onsubmit= "showform()"/>
</span> </span>        
<span class="form-elements">
<span class="form-label">Password:</span>
<span class="form-field">
<input type="password" id= "password1" onsubmit= "showform()"/>
</span> </span>        
<span class="form-elements">
<span class="submit-btn">
<input type="submit" value="Submit" onclick="validate()" /></span> 
<a href="register.html"><button type="button" class="swd-button">Register</button></a>
</span>
</span><span id='failed' style="color:red;"></span></p>

你不能设置密码字段为"Type Something"，因为它只会显示为星号，因为密码字段是隐藏的。因此，您需要某种类型的外部元素来通知用户需要密码。这就是为什么我在末尾添加了span标签。

如果我是你，我会在框外的字段中添加缺少文本的通知…但这可能是我的偏好。

还有一件事……我不知道为什么你使用跨度标签而不是表…

相关文章：