Question

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

我的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()里面似乎没有工作

Answer 1

所以这是代码，但是你需要解决一些问题。

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>

您无法将密码字段设置为＆＃34;输入内容＆＃34;因为密码字段被隐藏，它只会显示为星号。因此，您需要某种类型的外部元素来通知用户需要密码。这就是我在最后添加span标签的原因。

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

还有一件事......我不知道你为什么要使用span标签而不是桌子......这让你很难阅读......

在悬停时验证登录名和密码

1 个答案: