Question

我在获取请求发送之前有以下html表单使用js完成密码匹配，但是js无法正常工作

<html>
<title>Login System</title>
<head>
<script type="text/javascript">
function match()
{
var s1=document.getElementById('t4').value;
var s2=document.getElementById('t5').value;
if (s1 == s2)
{
alert('yep');
}
else
{
alert('Passwords Does not Match');
}
}
</script>
</head>
<style type="text/css">
div.ex {
width:220px;
padding:10px;
border:5px solid gray;
margin:10px;
}
</style>

<body>
<div class="ex">
<strong>User Login</strong>
<form name=f1 method=get action="http://localhost:8080/login">
User &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<input type=text name=t1><br>
Password <input type=password name=t2><br>
<input type=submit name=sub value="Login">
</form>
</div>
<div class="ex">
<strong>User Registration</strong>
<form name=f2 method=get action="http://localhost:8080/login">
User Name &nbsp&nbsp&nbsp&nbsp&nbsp<input type=text name=t3><br>
Password <input type=password name=t4><br>
Password <input type=password name=t5><br>
<input type=submit name=sub value="reg" onclick='match();'>
</form>
</div>

</body>
</html>

Answer 1

getElementById会查找id属性，而不是上面使用的name。

变化：

Password <input type=password name=t4><br>

到

Password <input type=password name=t4 id='t4'><br>

Answer 2

这是因为您刚刚给出了name属性

Password <input type=password name=t4><br>
Password <input type=password name=t5><br>

成功

Password <input type=password name=t4 id=t4><br>
Password <input type=password name=t5 id=t5><br>

同时提供name和id是一种很好的做法。帮助你，它不会失败:) 由于js将id（作为您的代码）和request对象将采用name

Answer 3

试试这个：

<html>
<title>Login System</title>
<head>
<script type="text/javascript">
function match()
{
    var s1=document.getElementById('t4').value;
    var s2=document.getElementById('t5').value;

    if(s1!="" && s2!="")
    {
        if (!(s1 == s2))
        {
            alert('Passwords does not Match');
            return false;
        }
    }
    else
    {
        alert("Please enter password");
        return false;
    }
}
</script>
</head>
<style type="text/css">
div.ex {
    width:220px;
    padding:10px;
    border:5px solid gray;
    margin:10px;
}
</style>

<body>
    <div class="ex">
        <strong>User Login</strong>
        <form name=f1 method=get action="http://localhost:8080/login">
            User &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<input type=text name=t1><br>
            Password <input type=password name=t2 /><br />
            <input type=submit name=sub value="Login" />
        </form>
    </div>
    <div class="ex">
        <strong>User Registration</strong>
        <form name=f2 method=get action="http://localhost:8080/login" onsubmit="return match();">
        User Name &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type=text name='t3' id='t3'><br>
        Password <input type=password name='t4' id='t4' /><br />
        Password <input type=password name='t5' id='t5' /><br />
        <input type=submit name=sub value="reg" />
</form>
</div>

</body>
</html>

Answer 4

你也可以尝试这个，而不是chanidn文本框只改变以下代码

var s1=document.getElementByName('t4');
var s2=document.getElementByName('t5');

这也可以帮助您获得这些价值。

Javascript没有执行

4 个答案: