简单的JavaScript登录表单验证
[英]Simple JavaScript login form validation
问题描述
Just a really simple login and redirect, but the script doesn't fire since I changed the button input type to 'submit' and the onClick event to onSubmit. 
只是一个非常简单的登录和重定向，但由于我将按钮输入类型更改为“submit”而onClick事件更改为onSubmit，因此脚本不会触发。 All is does now is just add the username and password as a string to the url. 现在一切都只是将用户名和密码作为字符串添加到网址。
<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>
6 个解决方案
解决方案1
7 已采纳 2014-04-17 14:04:17
The
inputtag doesn't haveonsubmithandler.input标记没有onsubmit处理程序。 Instead, you should put youronsubmithandler on actualformtag, like this:相反，您应该将onsubmit处理程序放在实际的form标记上，如下所示：
<form name="loginform" onsubmit="validateForm()" method="post">
Here are some useful links:以下是一些有用的链接： For the
formtag you can specify the request method,GETorPOST.对于form标记，您可以指定请求方法，GET或POST。 By default, the method isGET.默认情况下，该方法是GET。 One of the differences between them is that in case ofGETmethod, the parameters are appended to theURL(just what you have shown), while in case ofPOSTmethod there are not shown inURL.它们之间的区别之一是，在GET方法的情况下，参数被附加到URL（正如您所示），而在POST方法的情况下，URL中没有显示。You can read more about the differences here .
您可以在此处阅读有关差异的更多信息。
UPDATE: 更新：
You should return the function call and also you can specify the URL in action attribute of form tag. 您应该返回函数调用，你也可以指定URL的action的属性form标记。 So here is the updated code: 所以这是更新的代码：
<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>
解决方案2
2 2014-04-17 14:06:35
You can do two things here either move the onSubmit attribute to the form tag, or change the onSubmit event to an onCLick event. 您可以在此处执行两项操作：将onSubmit属性移动到表单标记，或将onSubmit事件更改为onCLick事件。
Option 1 选项1
<form name="loginform" onSubmit="return validateForm();">
Option 2 选项2
<input type="submit" value="Login" onClick="return validateForm();" />
解决方案3
2 2015-02-13 13:20:51
<!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>
解决方案4
1 2014-04-17 13:51:58
<form name="loginform" onsubmit="validateForm()">
而不是将onsubmit放在实际的输入按钮上
解决方案5
1 2014-04-17 13:52:43
Add a property to the form method="post" . 将属性添加到表单method="post" 。
Like this: 像这样：
<form name="loginform" method="post">
解决方案6
0 2015-04-23 11:36:25
Here is some useful links with example Login form Validation in javascript 以下是一些有用的链接， 其中包含 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();" />
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.