javascript - 如何在表单中显示错误信息

标签 javascript php

对于登录屏幕，我做了一些小的验证。 现在的问题是我不知道如何带来验证错误消息

请参阅 else 部分，其中提到了错误消息。

例如:当用户提供无效的用户名和密码时，错误消息为“无效的用户名和密码组合”

<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="icon" type="img/png" href="pic/logo3.png">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body id="loginform">
<?php


$servername = "localhost";
$username = "root";
$password = "";
$dbname = "";

$conn = new mysqli($servername, $username, $password, $dbname);

if (isset($_POST['submit']))
{
$name = $_POST['name'];
$pass =$_POST['pass'];

$query      = mysqli_query($conn,"SELECT * FROM admin_user WHERE name='$name' and pass='$pass'") or die(mysqli_error());
$row        = mysqli_fetch_row($query);

if ($row) 
{           

if (isset($_POST['remember'])) {
setcookie('name', time()+60*60*7);
}
session_start();
$_SESSION['name'] = $name;
header('location:index.php');
}
else
{

echo '<div class="col-sm-12 text-align--center error">'.'Invalid Username and Password Combination'.'</div>';
}

}
?>
<div class="col-sm-6 align-center loginForm">
<img src="pic/logo.png">
<div class="box">
<form action="" method="post" name="login" class="boxContent">
<label>Username</label><br>
<input class="login-input" type="text" name="name" /><br>
<label>Password</label><br>
<input class="login-input" type="password" name="pass" /><br>
<input class="login-input m-bottom" name="submit" type="submit" value="Login"/>
<input class="bump-left" type="checkbox" name="remember"><label>Remember me</label><br>
</form><br>
<div class="forgot">
<a class="bump-left" href="">Forgot Your Password?</a>
</div>
</div>
</div>
<div class="col-sm-6 col-pad--none">
<div class="bgcontent"><img src="pic/services2.jpg"></div>
</div>
</body>
</html>

最佳答案

Please read the comments above from Jay and take them into consideration and apply what is suggested as it is very important in securing your application

现在回到你的问题，你需要将错误消息存储在一个变量中，然后在你想要显示消息的地方回显该变量。

<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="icon" type="img/png" href="pic/logo3.png">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body id="loginform">
<?php

$loginError = "";
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "";

$conn = new mysqli($servername, $username, $password, $dbname);

if (isset($_POST['submit']))
{
$name = $_POST['name'];
$pass =$_POST['pass'];

$query      = mysqli_query($conn,"SELECT * FROM admin_user WHERE name='$name' and pass='$pass'") or die(mysqli_error());
$row        = mysqli_fetch_row($query);

if ($row) 
{           

if (isset($_POST['remember'])) {
setcookie('name', time()+60*60*7);
}
session_start();
$_SESSION['name'] = $name;
header('location:index.php');
}
else
{

$loginError = '<div class="col-sm-12 text-align--center error">Invalid Username and Password Combination</div>';
}

}
?>
<div class="col-sm-6 align-center loginForm">
<img src="pic/logo.png">
<div class="box">

    <?php echo $loginError;?> <!-- error will display here -->
<form action="" method="post" name="login" class="boxContent">
<label>Username</label><br>
<input class="login-input" type="text" name="name" /><br>
<label>Password</label><br>
<input class="login-input" type="password" name="pass" /><br>
<input class="login-input m-bottom" name="submit" type="submit" value="Login"/>
<input class="bump-left" type="checkbox" name="remember"><label>Remember me</label><br>
</form><br>
<div class="forgot">
<a class="bump-left" href="">Forgot Your Password?</a>
</div>
</div>
</div>
<div class="col-sm-6 col-pad--none">
<div class="bgcontent"><img src="pic/services2.jpg"></div>
</div>
</body>
</html>

编辑:

将上面用户评论中的所有内容放在一起:

Little Bobby says your script is at risk for SQL Injection Attacks. Learn about prepared statements for MySQLi. Even escaping the string is not safe! Or PDO,

要解决上述问题，您需要使用准备好的语句，您有两个选择，1使用mysqli准备好的语句或使用PDO准备好的语句，关于哪一个比互联网上的其他比较更好有很多争论，quick comparison here

老实说，我更喜欢 PDO。

Never store plain text passwords! Please use PHP's built-in functions to handle password security. If you're using a PHP version less than 5.5 you can use the password_hash() compatibility pack. Make sure you don't escape passwords or use any other cleansing mechanism on them before hashing. Doing so changes the password and causes unnecessary additional coding.

因此，上述问题的解决方案是使用 password_hash() 和 password_verify();

查看有关 password hash and verify here 的更多信息:

所以，当您从注册页面将数据插入数据库时​​，您现在需要做什么，您需要有一个哈希

$hash = password_hash($_POST['password'],PASSWORD_DEFAULT); Then you will need to store the hashed password in the database which is `$hash()`

这就是使用 PDO 和 password_verify() 登录的方式

<?php
session_start();

/*PDO Connection*/
$host    = 'localhost';
$db      = 'YOURDATABASE';
$user    = 'root';
$pass    = 'YOURPASSWORD';
$charset = 'utf8';

$dsn = "mysql:host=$host;dbname=$db;charset=$charset";
$opt = [
        PDO::ATTR_ERRMODE            => PDO::ERRMODE_EXCEPTION,
        PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
        PDO::ATTR_EMULATE_PREPARES   => false,
        ];

$dbh = new PDO($dsn, $user, $pass, $opt);

if (isset($_POST['submit'])) {

    $name = $_POST['name'];
    $pass = $_POST['pass'];

    $LoginMessage = "";

    $stmt    = $pdo->prepare("SELECT * FROM admin_user WHERE name = ?");
    $stmt->execute([$name]);
    $results = $stmt->fetch();

    if ($results && password_verify($_POST['pass'], $results['pass'])) {
        $_SESSION['name'] = $name;
        header('location:index.php');
    } else {
        $loginError = "<div class=\"col-sm-12 text-align--center error\">Invalid Username and Password Combination</div>";
    }
}

?>
<div class="col-sm-6 align-center loginForm">
<img src="pic/logo.png">
<div class="box">

    <?php echo $loginError;?> <!-- error will display here -->
<form action="" method="post" name="login" class="boxContent">
<label>Username</label><br>
<input class="login-input" type="text" name="name" /><br>
<label>Password</label><br>
<input class="login-input" type="password" name="pass" /><br>
<input class="login-input m-bottom" name="submit" type="submit" value="Login"/>
<input class="bump-left" type="checkbox" name="remember"><label>Remember me</label><br>
</form><br>
<div class="forgot">
<a class="bump-left" href="">Forgot Your Password?</a>
</div>
</div>
</div>
<div class="col-sm-6 col-pad--none">
<div class="bgcontent"><img src="pic/services2.jpg"></div>
</div>
</body>
</html>

关于javascript - 如何在表单中显示错误信息，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43322691/

上一篇：javascript - 使用 grep 过滤 json 对象数组

下一篇：javascript - openseadragon 在运行时更新属性 showReferenceStrip

相关文章：

javascript - 您可以将多个文件缩小为一个文件吗？

javascript - 给定 uids 数组，如何在 React Native 中返回 Firebase 数据的 JavaScript 对象？

php - 通过一个mysql查询更新多行

php - 我将如何使用 PHP preg_replace 进行以下替换？

php - Codeigniter 在 "core"文件夹中寻找库

javascript - Bluebird 的绑定(bind)方法在调用之间保存上下文(this)

javascript - 如何阻止 child 继承 parent 的不透明度

php - 字符串清理以支持特殊字符，例如 ñ、á、é、í、ó、ú 等

javascript - 如果没有可用的应用程序，则显示消息

php - json请求在本地主机上工作但不在服务器上

©2024 IT工具网  联系我们