Question

我想使用纯javascript（没有库）创建一个loginform，我有2个问题！

解决了！作者：Grainier Perera

当username.value.length达到4个字符时，usernameInfo.innerHTML会变回“请输入ypur用户名”！问题是passwordInfo.innerHTML会在username.value.length达到4个字符后立即更改为“至少6个字符”。所以这是我的第一个问题。我想只在我开始输入密码字段（onkeyup）时才更改passwordInfo.innerHTML。
我的第二个问题。当我提交带有空字段的表单时，我想要更改usernameInfo.innerHTML和passwordInfo.innerHTML，而不仅仅是usernameInfo.innerHTML。

为了让您更容易理解代码，我会将其全部粘贴在此处，以便您可以复制并自行尝试。谢谢！

<!DOCTYPE html>
<html>
<head>

<style>

form label {display:block; margin-top:5px;margin-left:3px;font:12px Arial;color:gray;}
form input {width:200px;padding:5px;display:inline-block; margin-top:5px;}
#submit {padding:7px;background-color:#f7af38;     border:#f7af38;width:215px;display:inline-block;margin-top:15px;font:11px Tahoma;color:black;}
#usernameInfo {display:inline-block; font:italic 12px Arial; color:gray;}
#passwordInfo {display:inline-block; font:italic 12px Arial; color:gray;}
#finalInfo {font:italic 12px Arial; margin-left:5px;}


</style>

</head>

<body>

<form method="post" action="login.php" onsubmit="return validate();">

    <label>Username</label>
    <input id="username" name="username" type="text" onkeyup="return validate();" /> 
    <span id="usernameInfo"></span>


    <label>Password</label>
    <input id="password" name="password" type="password" onkeyup="return validate();" /> 
    <span id="passwordInfo"></span>

     <br />

     <input type="submit" id="submit" name="submit" />
    <span id="finalInfo"></span>

</form>

<script type="text/javascript">

document.getElementById('usernameInfo').innerHTML = "Please type your username!";
document.getElementById('passwordInfo').innerHTML = "Please type your password!";


function validate()
{
    var username = document.getElementById('username');
    var usernameInfo = document.getElementById('usernameInfo');
    var password = document.getElementById('password');
    var passwordInfo = document.getElementById('passwordInfo');

    if(username.value.length < 4){
        usernameInfo.style.color='red';
        usernameInfo.innerHTML = "At least 4 characters!";
        return false;
    }
    else{
        usernameInfo.style.color='gray';
        usernameInfo.innerHTML = "Please type your username!";

    }
    if(password.value.length < 6){
        passwordInfo.style.color='red';
        passwordInfo.innerHTML = "At least 6 characters!";
        return false;
    }
    else{
        passwordInfo.style.color='gray';
        passwordInfo.innerHTML = "Please type your password!";
    }

}

</script>

</div>

</body>
</html>

Answer 1

试试这个

HTML

<form method="post" action="login.php" onsubmit="return validateForm();">
    <label>Username</label>
    <input id="username" name="username" type="text" onkeyup="return validateUserName();" />
    <span id="usernameInfo"></span>

    <label>Password</label>
    <input id="password" name="password" type="password" onkeyup="return validatePassWord();" />
    <span id="passwordInfo"></span>

    <br />
    <input type="submit" id="submit" name="submit" />
    <span id="finalInfo"></span>
</form>

的JavaScript

document.getElementById('usernameInfo').innerHTML = "Please type your username!";
document.getElementById('passwordInfo').innerHTML = "Please type your password!";

function validateUserName()
{
    var username = document.getElementById('username');
    var usernameInfo = document.getElementById('usernameInfo');

    if(username.value.length < 4){
        usernameInfo.style.color='red';
        usernameInfo.innerHTML = "At least 4 characters!";
        return false;
    }
    else{
        usernameInfo.style.color='gray';
        usernameInfo.innerHTML = "Please type your username!";
        return true;
    }
}

function validatePassWord()
{
    var password = document.getElementById('password');
    var passwordInfo = document.getElementById('passwordInfo');

    if(password.value.length < 6){
        passwordInfo.style.color='red';
        passwordInfo.innerHTML = "At least 6 characters!";
        return false;
    }
    else{
        passwordInfo.style.color='gray';
        passwordInfo.innerHTML = "Please type your password!";
        return true;
    }
}

function validateForm()
{
    var userValid = validateUserName();
    var passValid = validatePassWord();
    return userValid && passValid;
}

工作样本：link

Javascript keyup登录表单

1 个答案: