Javascript 验证悬停时的登录名和密码

我的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>

我的验证检查

<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>

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

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

---

我要做的是验证登录名和密码。这是用户不能只输入空值。其他的都可以接受。但是我的showform已经是一个函数了。那么我应该把我的验证放在哪里呢。我试着把它放在

showform（）

中，它似乎不起作用了，所以这里是代码，但是您需要解决一些问题

<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>

    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;

我也改变了你的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>

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;
    };
};

登录/注册
姓名：
密码：

<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>

您不能将密码字段设置为“键入内容”，因为密码字段是隐藏的，因此它只会显示为星号。因此，您需要某种类型的外部元素来通知用户需要密码。这就是我在末尾添加span标记的原因

<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>

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

<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>

---

还有一件事。。。我不知道你为什么用span标签代替表格。。。这让阅读变得非常困难…

谢谢，非常感谢。终于明白我做错了什么。顺便说一句，我之所以使用span，是因为我已经将它与css正确对齐。我试过那张桌子，但它破坏了我的排列。

<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>