这是我的登录页面代码:
<!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。
您的代码中存在一些问题:
id="usrname2"
和id="pass2"
,但是您的JavaScript调用getElementById("usrname")
和getElementById("pass")
这些元素根本不存在。更改您的字段的ID,它将返回值openDatabase
,您可能希望交换线路祝你好运