Question

我正在尝试为网页创建密码字段。到目前为止，我有：

<form name="PasswordField" action="">
Password:
<input type="password" name="password">
<input type="button" value="Log in">
</form>

可怜我知道。它不一定是花哨的，我只需要从文本框中“获取”密码并将其与页面的密码相匹配。我假设我可以使用if-else？

*Code for get password from textbox when the "Log in" button is pressed here*
if (password = "rawr")
{alert('Correct!')}
else
{alert('Wrong Password')}

可悲的是，我几个小时都在愚弄这个。我也试过功能，但这对我来说似乎也不起作用。

Answer 1

如果你走这条路线，你需要将验证放在一个在按钮的onclick事件中调用的函数中。另外，要访问js中的密码<input节点，您可以为其指定id并使用document.getElementById(id)。此外，=是一个赋值运算符。使用==进行比较：）

<head>
<script type="text/javascript">
function isValid(){
var password = document.getElementById('password').value;
if (password == "rawr")
{alert('Correct!')}
else
{alert('Wrong Password')}
}
</script>
</head>

<form name="PasswordField" action="">
Password:
<input type="password" id="password" name="password">
<input type="button" value="Log in" onclick="isValid();">
</form>

或者更简单的方法是将密码DOM节点作为参数传递给函数：

<head>
<script type="text/javascript">
function isValid(myNode){
var password = myNode.value;
if (password == "rawr")
{alert('Correct!')}
else
{alert('Wrong Password')}
}
</script>
</head>

<form name="PasswordField" action="">
Password:
<input type="password" id="password" name="password">
<input type="button" value="Log in" onclick="isValid(this);">
</form>

Answer 2

这是你在找什么？

document.forms['PasswordField'].elements['password'].value

Answer 3

我使用了jquery，这是我的解决方案：

<html>
<head>
    <script type="text/javascript" src="jquery-1.4.4.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("input[name='login']").click(function() {
                var s = $("input[name='password']").val();

                if(s == "rawr") {alert('Correct!')}
                else {alert('Wrong Password')}
            });
        });
    </script>

</head>

<body>
    <form name="PasswordField" action="">
    Password:<input type="password" name="password">
        <input type="button" value="Log in" name="login">
    </form>
</body>

</html>

创建“简单”密码验证字段

3 个答案: