提交时未调用javascript函数

时间：2019-04-21 06:31:05

标签： javascript html

我已经编写了用于验证用户名和密码的简单html javascript代码，但是提交表单时未调用函数authorize（）。谁能帮助我找出我的代码中的错误。我知道存在相同的问题，我确实关注了他们，但我找不到自己的错误。谢谢。 下面是我的代码

<script type="type/javascript" >

    var users = {{"Username":"Sunny","Password":"Panzer"},{"Username":"Anjali","Password":"406460"}};

     function authorize()
    {
        var username= document.getElementById("username").value;
        var password = document.getElementById("password").value;

        for(var i=0;i<users.length;i++)
        {
            if(users[i].Username==username && users[i].Password==password)
            {
                return true;
            }
        }

        alert("invalid username or password");
        return false;
    }

</script>


<form action="enter_details.html" onsubmit="return authorize()" >
    <center>Username  <input type="text" id="username"></center><br><br>
    <center>Password  <input type="text" id="password"></center><br><br>
    <center><input type="submit" id="login_button"  value="Log In"></center>    
</form>

6 个答案:

答案 0 :(得分：1)

您应将JSON数组括在方括号（而不是大括号）中，如下所示：

var users = [{
    "Username": "Sunny",
    "Password": "Panzer"
  },
  {
    "Username": "Anjali",
    "Password": "406460"
  }
];

function authorize() {
  var username = document.getElementById("username").value;
  var password = document.getElementById("password").value;

  for (var i = 0; i < users.length; i++) {
    if (users[i].Username == username && users[i].Password == password) {
      return true;
    }
  }
  alert("invalid username or password");
  return false;
}
<form action="enter_details.html" onsubmit="return authorize()">
  <center>Username <input type="text" id="username"></center><br><br>
  <center>Password <input type="text" id="password"></center><br><br>
  <center><input type="submit" id="login_button" value="Log In"></center>
</form>

答案 1 :(得分：1)

我们在这里有两个问题

1-用户必须是像这样的对象数组：

var users = [{"Username":"Sunny","Password":"Panzer"},{"Username":"Anjali","Password":"406460"}];

2-当您在html中插入JavaScript代码时，它不是： type =“ type / javascript” ，而是 type =“ text / javascript”

要恢复，您的代码必须类似于：

<script type="text/javascript">
    
                var users = [{"Username":"Sunny","Password":"Panzer"},{"Username":"Anjali","Password":"406460"}];
            
                function authorize()
                {
                    var username= document.getElementById("username").value;
                    var password = document.getElementById("password").value;
            
                    for(var i=0;i<users.length;i++)
                    {
                        if(users[i].Username==username && users[i].Password==password)
                        {
                            return true;
                        }
                    }
            
                    alert("invalid username or password");
                    return false;
                }
            
            </script>

希望对您有帮助

答案 2 :(得分：0)

我相信您的主要问题是变量users应该是array。您当前的语法对于变量users的定义无效，并且将引发错误（您可以检查控制台以查看它）。请使用该修复程序检查下一个示例。

var users = [
  {"Username":"Sunny","Password":"Panzer"},
  {"Username":"Anjali","Password":"406460"}
];

function authorize()
{
    var username = document.getElementById("username").value;
    var password = document.getElementById("password").value;

    for (var i = 0; i < users.length; i++)
    {
        if (users[i].Username == username && users[i].Password == password)
        {
            return true;
        }
    }

    alert("invalid username or password");
    return false;
}
<form onsubmit="return authorize()" >
    <center>Username  <input type="text" id="username"></center><br><br>
    <center>Password  <input type="text" id="password"></center><br><br>
    <center><input type="submit" id="login_button"  value="Log In"></center>    
</form>

甚至，如果您使用Array.some()，也可以简化authorize()函数的作用：

function authorize()
{
    var username = document.getElementById("username").value;
    var password = document.getElementById("password").value;
    let res = users.some(user => user.Username == username && user.Password == password);

    if (!res)
        alert("invalid username or password");

    return res;
}

答案 3 :(得分：0)

尝试使用事件监听器

向表单添加id属性

<form id="myForm" action="enter_details.html" onsubmit="return authorize()" >
    <center>Username  <input type="text" id="username"></center><br><br>
    <center>Password  <input type="text" id="password"></center><br><br>
    <center><input type="submit" id="login_button"  value="Log In"></center>    
</form>

并在is中添加事件侦听器代码

document.querySelector("#myForm")
.addEventListener("submit", function(eve) {
    eve.preventDefault();
    authorize();
}

如果这不起作用，请在输入按钮上尝试

document.querySelector("#login_button")
.addEventListener("click", function(eve) {
    eve.preventDefault();
    authorize();
}

答案 4 :(得分：0)

var users = [{"Username":"Sunny","Password":"Sunny"},{"Username":"Anjali","Password":"406460"}];

function authorize(){
        var username= document.getElementById("username").value;
        var password = document.getElementById("password").value;

        for(var i=0;i<users.length;i++)
        {
            if(users[i].Username==username && users[i].Password==password)
            {
                return true;
            }
        }

        alert("invalid username or password");
        return false;
}
<form onsubmit="authorize()" >
    <center>Username  <input type="text" id="username"></center><br><br>
    <center>Password  <input type="text" id="password"></center><br><br>
    <center><input type="submit" id="login_button"  value="Log In"></center>    
</form>

答案 5 :(得分：0)

如果要使用回调函数来提交表单，则需要单击绑定。 提交按钮并使用event.preventDefault();来防止页面在回调中跳转，这是默认操作形式

<form>
  <center>Username  <input type="text" id="username"></center><br><br>
  <center>Password  <input type="text" id="password"></center><br><br>
  <center><input type="submit" onclick="authorize(event)" id="login_button"  value="Log In"></center>
</form>






<script>

    var users = [{"Username":"Sunny","Password":"Panzer"},{"Username":"Anjali","Password":"406460"}];

     function authorize(event)
    {
        event.preventDefault();
        var username= document.getElementById("username").value;
        var password = document.getElementById("password").value;

        for(var i=0;i<users.length;i++)
        {
            if(users[i].Username==username && users[i].Password==password)
            {
                return true;
            }
        }

        alert("invalid username or password");
        return false;
    }

</script>
相关问题
最新问题