我如何验证用户名和密码是否存在于登录页面的Websql数据库中?

问题描述 投票:0回答:1

这是我的登录页面代码:

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
    <script type="text/javascript" src="C:\Users\Si Mohamed\Desktop\projects\game shop\jv.js">          
</script>
<title>E-keys Store</title>
</head>
<script>
function verify() {

var usrname = document.getElementById("usrname").values;
var pass = document.getElementById("pass").values;



if (usrname2 == usrname && pass2 == pass) {
alert("logged in successfully");

}else {

alert("account doesnt exist");
}
}

</script>
<body>
<form class="sign" action="index.html" method="post">


<div class="sign_in">
<p class="title">SIGN IN</p>
<p class="mailtitle">Email or Username <br><input class="inp1" type="text" name="Username" 
id="usrname2" value=""></p>
<p class="passtitle">Password<br><input type="password" name="Password" id="pass2"    
class="inp2"></p>
<input type="checkbox" class="check1">
<div class="txt1">Remember</div>
<div class="txt2">Me</div>
<img src="signinbtn.svg" class="signinbtn" onclick="verify();" >
<a href="http://127.0.0.1:3000/Sign%20Up/index2.html" class="link1"><p>You don't have an  
account? Sign up </p></a>
<a href="" class="link2"><p>Forgot your password?</p></a>
</div>
 </form>
<aside class="bg">
<img src="bgblue.svg">
</aside>
 </body>
</html>

这是我的链接到登录页面和注册页面的js代码:

var mydb = openDatabase("accounts", "0.1", "Testing  Database", 1024 * 1024);
if (window.openDatabase) {



//create the  table using SQL for the database using a transaction
mydb.transaction(function(t) {
t.executeSql("CREATE TABLE IF NOT EXISTS mydb (id INTEGER PRIMARY KEY, mailusr VARCHAR(50),
usrname VARCHAR(50), pass VARCHAR(100))");
});

} else {
alert("WebSQL is not supported by your browser!");
}


//function to output the list of cars in the database
function updateDrafts(transaction, results) {
//initialise the listitems variable
var listitems = "";
//get the list holder ul
var listholder = document.getElementById("drafts");

//clear the list of drafts ul
listholder.innerHTML = "";

var i;
//Iterate through the results
for (i = 0; i < results.rows.length; i++) {
//Get the current row from database
var row = results.rows.item(i);

listholder.innerHTML += "<li>" + row.mailusr + " - " + row.usrname + " - " + row.pass + "(<a   
href='javascript:void(0);' onclick='deleteDraft(" + row.id + ");'>Delete this account</a>)";
}
}

//function to get the list of accounts from the database

function outputDrafts() {
//check to ensure the mydb object has been created
if (mydb) {

mydb.transaction(function(t) {
t.executeSql("SELECT * FROM mydb", [], updateDrafts);
});
} else {
alert("db not found, your browser does not support web sql!");
}
}
//function to add account

function addDraft() {
//check to ensure the mydb object has been created
if (mydb) {
//get the values of user and pass text inputs
var mailusr = document.getElementById("mailusr").value;
var usrname = document.getElementById("usrname").value;
var pass = document.getElementById("pass").value;
var pass1 = document.getElementById("pass1").value;

//Test to ensure that the user has filled all the form
if (mailusr !== "" && usrname !== "" && pass !== "" && pass == pass1) {
//Insert the user entered details into database
mydb.transaction(function(t) {
t.executeSql("INSERT INTO mydb (mailusr, usrname, pass) VALUES (?, ?, ?)", [mailusr, usrname,  
pass]);
outputDrafts();
});
} else if (mailusr !== "" && usrname !== "" && pass !== "" && pass !== pass1) {
alert("Your password does not match with your confirmation");
}
else{
alert("You need to fill all fields");
}

}}
var link = document.getElementById("adduser");

link.onclick = function () { alert(1)
addDraft();

};
db.transaction(function (tx) {
tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {
var len = results.rows.length, i;
msg = "<p>Found rows: " + len + "</p>";
document.querySelector('#status').innerHTML +=  msg;

for (i = 0; i < len; i++) {
alert(results.rows.item(i).log );
}

}, null);
});

我无法以某种方式通过登录页面中的id提取值,它说index.html:12 Uncaught TypeError:无法读取null的属性'values'在验证时(index.html:12)!我需要设法以某种方式获取用户名和密码之类的数据库详细信息,以验证用户帐户是否在注册页面中创建的数据库中提前致谢。我是javascript和websql的初学者:D。

javascript html web-sql
1个回答
0
投票

您的代码中存在一些问题:

  • 您的输入字段具有id="usrname2"id="pass2",但是您的JavaScript调用getElementById("usrname")getElementById("pass")这些元素根本不存在。更改您的字段的ID,它将返回值
  • 在实际检查是否可用之前,请先致电openDatabase,您可能希望交换线路
  • never ever ever,即使用于测试存储密码也是如此。使用哈希和盐来确保它们的安全。养成习惯。

祝你好运

© www.soinside.com 2019 - 2024. All rights reserved.