Question

我已经编写了一个基本注册页面的代码，可以在我的网络服务器上运行，但是javascript似乎不能在html文件中运行。我做一个带有javascript函数的表单帖子来查找错误但是当我测试时它似乎完全忽略了javascript代码。我的javascript代码或html代码有问题吗？我的代码如下所示。

<script type="text/javascript" language="Javascript">

    function checkPasswordMatch(){
        var password = document.getElementById("pass1").value;
        var password2 = document.getElementById("pass2").value;

        if(password != password2){
            document.getElementById("divcheckpasswordmatch").innerHTML = "Passwords do not match!";}
        else{
            document.getElementById("divcheckpasswordmatch").innerHTML = "Passwords match.";}
    }

//  $(document).ready(function(){
//      $("#pass2").keyup(checkPasswordMatch);
//  })

    function Error() {
        var user = document.getElementById("user").value;
        var pass1 = document.getElementById("pass1").value;
        var pass2 = document.getElementById("pass2").value;
        var email = document.getElementById("email").value;

        if(user=""){
            document.form1.username.focus();
            document.getElementById("usernameerror").innerHTML = "Enter username.";
            return false;
        }
        if(pass1=""){
            document.form1.password1.focus();
            document.getElementById("passworderror1").innerHTML = "Enter password.";
            return false;
        }
        if(pass2=""){
            document.form1.password2.focus();
            document.getElementById("passworderror2").innerHTML = "Enter password.";
            return false;
        }
        if(email=""){
            document.form1.useremail.focus();
            document.getElementById("emailerror").innerHTML = "Enter email";
            return false;
        }

    }

    </script>
    </head>
    <body>

    <div id="link">
    <a href="/" align="right">Home</a>
    <a align="right" href="signin">Sign-in</a>
    </div>

    <div id="header">
    <center><h1><i>IMGCAPTURE</i></h1></center>
    </div>

    <div id="create">
    <center><h2>Create Your Account</h2></center>

<form name="form1" action="account" onsubmit="return Error()" method="POST">
    <div id="username"><center><h3>Enter Username:  <input type="text" name="username" id="user" cols="15" rows="1"></input></h3></center></div>
    <div id="usernameerror"></div>
    <div id="password"><center><h3>Enter Password:  <input type="password" name="password1" id="pass1" cols="15" rows="1"></input></h3></center></div>
    <div id="passworderror1"></div>
    <div id="confirmpassword"><center><h3>Re-Enter Password:  <input type="password" name="password2" id="pass2" onChange="checkPasswordMatch()" cols="15" rows="1"></input></h3></center></div>
    <div id="passworderror2"></div>
    <div class="registrationFormAlert" id="divcheckpasswordmatch"></div>
    <center><h3>Enter Email:  <input type="email" name="useremail" id="email" cols="15" rows="1">
    </input></h3></center>
    <div id="emailerror"></div>
    <center><input type="submit" value="Create Account" onclick="Error()"></input></center>
</form>

    </div>
    </body>
    </html>

Answer 1

您可能没有调用正在创建的功能。因此，既然你没有用参数调用这些函数，那么它们内部就不会发生任何事情。如果这样可以解决它，请告诉我。

另外，从风格上来说，您需要在HTML文件末尾添加Javascript代码。

Answer 2

不要通过name="password2"标记将输入onChange绑定到函数，而是尝试将其绑定为：

$(document).on('change', 'input[name="checkPasswordMatch"]', checkPasswordMatch);

function checkPasswordMatch() {
    ...
}

在您的HTML中，删除onChange代码：

<div id="confirmpassword">
<center>
<h3>
    Re-Enter Password:  <input type="password" name="password2"   id="pass2" cols="15" rows="1"></input>
</h3>
</center></div>

Answer 3

您似乎忘记了包含jQuery。如果你使用纯JS，它可以工作：

<script type="text/javascript">
    function checkPasswordMatch() {
        var password = document.getElementById("pass1").value;
        var password2 = document.getElementById("pass2").value;

        if (password != password2) {
            document.getElementById("divcheckpasswordmatch").innerHTML = "Passwords do not match!";
        } else {
            document.getElementById("divcheckpasswordmatch").innerHTML = "Passwords match.";
        }
    }

    document.addEventListener('DOMContentLoaded', function() {
        document.getElementById("pass2").addEventListener('keyup', checkPasswordMatch);
    });

    function Error() {
        var user = document.getElementById("user").value;
        var pass1 = document.getElementById("pass1").value;
        var pass2 = document.getElementById("pass2").value;
        var email = document.getElementById("email").value;

        if (user = "") {
            document.form1.username.focus();
            document.getElementById("usernameerror").innerHTML = "Enter username.";
            return false;
        }
        if (pass1 = "") {
            document.form1.password1.focus();
            document.getElementById("passworderror1").innerHTML = "Enter password.";
            return false;
        }
        if (pass2 = "") {
            document.form1.password2.focus();
            document.getElementById("passworderror2").innerHTML = "Enter password.";
            return false;
        }
        if (email = "") {
            document.form1.useremail.focus();
            document.getElementById("emailerror").innerHTML = "Enter email";
            return false;
        }
    }
</script>

Answer 4

您可能希望在if语句中使用==或===。您将用户等分配给if条件中的空字符串。

    if(user == ""){
        document.form1.username.focus();
        document.getElementById("usernameerror").innerHTML = "Enter username.";
        return false;
    }

Javascript无法在html文件中运行

4 个答案: