Question

只是一个非常简单的登录和重定向，但是由于我将按钮输入类型更改为“submit”而onClick事件更改为onSubmit，因此脚本不会触发。现在一切都只是将用户名和密码作为字符串添加到网址。

<form name="loginform">
    <label>User name</label>
    <input type="text" name="usr" placeholder="username"> 
    <label>Password</label>
    <input type="password" name="pword" placeholder="password">
    <input type="submit" value="Login" onSubmit="validateForm();" />
</form>

<script>
    function validateForm() {
        var un = document.loginform.usr.value;
        var pw = document.loginform.pword.value;
        var username = "username"; 
        var password = "password";
        if ((un == username) && (pw == password)) {
            window.location = "main.html";
            return false;
        }
        else {
            alert ("Login was unsuccessful, please check your username and password");
        }
      }
</script>

Answer 1

input代码没有onsubmit处理程序。相反，您应该将onsubmit处理程序放在实际form标记上，如下所示：

<form name="loginform" onsubmit="validateForm()" method="post">

这里有一些有用的链接：
- JavaScript Form Validation
- Form onsubmit Event
对于form标记，您可以指定请求方法GET或POST。默认情况下，该方法为GET。它们之间的区别之一是，在GET方法的情况下，参数会附加到URL（正如您所示），而在POST方法的情况下则没有显示在URL中。

您可以详细了解差异here。

<强>更新

您应该返回函数调用，并且还可以在URL标记的action属性中指定form。所以这是更新的代码：

<form name="loginform" onSubmit="return validateForm();" action="main.html" method="post">
    <label>User name</label>
    <input type="text" name="usr" placeholder="username"> 
    <label>Password</label>
    <input type="password" name="pword" placeholder="password">
    <input type="submit" value="Login"/>
</form>

<script>
    function validateForm() {
        var un = document.loginform.usr.value;
        var pw = document.loginform.pword.value;
        var username = "username"; 
        var password = "password";
        if ((un == username) && (pw == password)) {
            return true;
        }
        else {
            alert ("Login was unsuccessful, please check your username and password");
            return false;
        }
  }
</script>

Answer 2

您可以在此处执行两项操作：将onSubmit属性移动到表单标记，或将onSubmit事件更改为onCLick事件。

选项1

<form name="loginform" onSubmit="return validateForm();">

选项2

<input type="submit" value="Login" onClick="return validateForm();" />

Answer 3

<!DOCTYPE html>
<html>
<head>
<script>
function vali() {
var u=document.forms["myform"]["user"].value;
var p=document.forms["myform"]["pwd"].value;
if(u == p) {
alert("Welcome");
window.location="sec.html";
return false;
}
else
{
alert("Please Try again!");
return false;
}
}
</script>
</head>
<body>
<form method="post">
<fieldset style="width:35px;">  <legend>Login Here</legend>
<input type="text" name="user" placeholder="Username" required>
<br>
<input type="Password" name="pwd" placeholder="Password" required>
<br>
<input type="submit" name="submit" value="submit" onclick="return vali()">
</form>
</fieldset>
</html>

Answer 4

<form name="loginform" onsubmit="validateForm()">

而不是将onsubmit放在实际的输入按钮上

Answer 5

向表单method="post"添加属性。

像这样：

<form name="loginform" method="post">

Answer 6

以下是一些有用的链接与示例 Login form Validation in javascript

function validate() {
        var username = document.getElementById("username").value;
        var password = document.getElementById("password").value;
        if (username == null || username == "") {
            alert("Please enter the username.");
            return false;
        }
        if (password == null || password == "") {
            alert("Please enter the password.");
            return false;
        }
        alert('Login successful');

    } 

  <input type="text" name="username" id="username" />
  <input type="password" name="password" id="password" />
  <input type="button" value="Login" id="submit" onclick="validate();" />

简单的JavaScript登录表单验证

6 个答案: