0
機能を追加する方法にいくつかの問題があります。誰かが私に「名前/パスワードフィールドが空である」というポップアップメッセージを表示する機能を追加する方法を教えてもらえますか？ ログインフィールドを空にしてログインすると、ここに問題があります。彼らは空だったのに？私は任意のPHP関数を使用することはできません。ユーザーが何かを入力したかどうかをチェックする機能
<html>
<head>
<title>Week 9 Q&A Session - Form Demo</title>
</head>
<body>
<!--Registration form -->
<div>
<h1>Registration</h1>
<form onsubmit="registerUser()">
<input type="text" name="username" value="" id="name" required>
<input type="password" name="password" id="password" required>
<button type="submit">Submit</button>
</form>
</div>
<!-- Login form -->
<div>
<h1>Login</h1>
<input type="text" name="username" value="" id="loginName">
<input type="password" name="password" id="loginPassword">
<button onclick="checkLogin()">Submit</button>
<p id="LoginResult">Not logged in.</p>
</div>
<!-- Rankings table will be inserted here -->
<div id="RankingsTable"></div>
<script>
/* Does some basic checking of user data then stores
user data in localStorage */
function registerUser(){
//Extract the name and password that the user has entered
var nameInput = document.getElementById("name").value;
var pwdInput = document.getElementById("password").value;
//Check that the name and password are not empty
if(nameInput !== "" && pwdInput !== ""){
//Create a JavaScript object to hold the user data.
var usrObj = {};
//Add user entered data to object
usrObj.username = nameInput;
usrObj.password = pwdInput;
//Add a score field to object to support rankings table
usrObj.topscore = 0;
//Store a string version of the object in local storage.
localStorage[nameInput] = JSON.stringify(usrObj);
}
}
/* Checks that the username and password match the user name and password of a
registered user and provides feedback to user. */
function checkLogin(){
//Get a reference to the div where we will display the login result
var loginResult = document.getElementById("LoginResult");
//Extract the name and password that the user has entered
var nameInput = document.getElementById("loginName").value;
var pwdInput = document.getElementById("loginPassword").value;
//Output for debugging
console.log("Login name: " + nameInput+ "; Login password" + pwdInput);
//Check to see if we have data stored for this user
if(localStorage[nameInput] === undefined){
//No user found - provide feedback to user.
loginResult.innerHTML = "User name incorrect";
return;
}
//Check password
//Get object that is stored for the user name.
var usrObj = JSON.parse(localStorage[nameInput]);
//Compare the entered password with the stored password
if(pwdInput !== usrObj.password){
//Incorrect password - provide feedback to user
loginResult.innerHTML = "Password incorrect";
return;
}
//If we have got this far, the username and password are correct
//Record the user that has logged in using local storage.
localStorage.loggedInUser = nameInput;
//Provide feedback to user - you could also provide a logout button - see the example in my slides.
loginResult.innerHTML = "User logged in.";
}
/* This function is called when a logged in user
plays the game and gets a score */
function updateScore(newScore){
//Get the JavaScript object that holds the data for the logged in user
var usrObj = JSON.parse(localStorage[localStorage.loggedInUser]);
//Update the user object with the new top score
/* NOTE YOU NEED TO CHANGE THIS CODE TO CHECK TO SEE IF THE NEW SCORE
IS GREATER THAN THE OLD SCORE */
usrObj.topscore = newScore;
//Put the user data back into local storage.
localStorage[localStorage.loggedInUser] = JSON.stringify(usrObj);
}
/* Loads the rankings table.
This function should be called when the page containing the rankings table loads */
function showRankingsTable(){
//Get a reference to the div that will hold the rankings table.
var rankingDiv = document.getElementById("RankingsTable");
//Create a variable that will hold the HTML for the rankings table
var htmlStr = "";
//Add a heading
htmlStr += "<h1>Rankings Table</h1>";
//Add the table tag
htmlStr += "<table>";
//Work through all of the keys in local storage
for(var key in localStorage) {
//All of the keys should point to user data except loggedInUser
if(key !== "loggedInUser"){
//Extract object containing user data
//Extract user name and top score
htmlStr += "David";
//Add a table row to the HTML string.
}
}
//Finish off the table
htmlStr += "</table>";
//Add the table to the page.
}
</script>
あなたは赤い色で提出されたそれぞれのテキストの下にエラーメッセージを表示することができます。 –
入力タグ –
で「必須」のようなhtml5検証を使用することもできますが、試しましたが動作しません。あなたがコードを試して、それがあなたのために働くかどうか教えてください。 –