Я пытаюсь использовать модули JavaScript для извлечения пользовательского ввода (например, адреса электронной почты и пароля) из формы регистрации и установки его в хранилище сеансов.Я пробовал несколько разных подходов и до сих пор не могу сохранить в хранилище сессий и не получаю никаких ошибок в средствах разработки в Chrome.Также необходимо подтвердить правильность адреса электронной почты в скрипте регистрации.Вот детали проекта, чтобы дать идею.
- Мы должны разрешить нашим пользователям регистрироваться для доступа к нашему приложению.Для этого нам нужно хранить информацию о наших пользователях, чтобы ее можно было извлечь.Создайте модуль UserStore, который должен хранить имя пользователя и пароль пользователя в хранилище сеансов.
В модуле UserStore должны быть доступны следующие методы:
a.Get: извлекает объект пользователя по указанному адресу электронной почты.б.Сохранить: сохраняет пользовательский объект в хранилище сеанса
Нам также нужна регистрационная форма, чтобы наши пользователи могли зарегистрироваться.Поэтому создайте страницу registration.html и создайте ссылку на нее со своей домашней страницы.Подтверждение для этой страницы должно подтвердить, что пользователь ввел действительный адрес электронной почты, и в этом случае следует сохранить информацию о пользователе в хранилище UserStore.
Наконец, измените ваш скрипт login.js до настоящего моментаполучить объект пользователя из хранилища UserStore, чтобы использовать его для входа в систему.
Любые предложения или помощь приветствуются.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tissue: Titan Issue Tracking</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Issue Tracking System"/>
<link rel="stylesheet" type="text/css" href="tissue.css">
<script type="text/javascript" src="js/userStore.js"></script>
<script type="text/javascript" src="js/registration.js"></script>
</head>
<body>
<div id="wrapper">
<h2>TISSUE: Titan Issue Tracker</h2>
<div class="topnav">
<a href="index.html">Home</a>
<a href="Login.html">Login</a>
</div>
<div id="loginwrap">
<h1>Create New Account</h1>
</div>
<div id="signupForm">
<form action="Issues.html" method="post" id="loginform" onsubmit="return handleReg()">
<div class="labels">
<label for="email">* E-mail:</label>
</div>
<div class="rightTab">
<input type="email" name="email" id="email" class="input-field" placeholder="Enter Your E-mail" required>
</div>
<div class="labels">
<label for="Password">* Password:</label>
</div>
<div class="rightTab">
<input type="password" name="password" id="password" class="input-field" placeholder="Create Password" required>
</div>
<div class="labels">
<label for="password">* Confirm Password:</label>
</div>
<div class="rightTab">
<input type="password" name="password" id="password1" class="input-field" placeholder="Confirm Password" required>
</div>
<div id="loginwrap">
<hr>
<input class="button" type="submit" value="Submit">
</div>
</form>
</div>
</div>
<div class="copyright">
Copyright © 2018 Titan Issue Tracker
</div>
</body>
</html>
Модуль UserStore
//UserStore: Allow users to register
(function (window) {
"use strict"
var App = window.App || {};
function UserStore() {
console.log("running the UserStore function");
}
//Add: Saves email & password in session storage
UserStore.prototype.save = function (userName, password) {
sessionStorage.setItem("userName", userName);
sessionStorage.setItem("password", password);
};
//Get: Retrieves username & password
UserStore.prototype.get = function (password) {
var userEml = sessionStorage.getItem("userName", userName);
var userPwd = sessionStorage.getItem("password", password);
return userEml;
return userPwd;
};
App.UserStore = UserStore;
window.App = App;
})(window);
Функция регистрации
//User Registration
function handleReg () {
'use strict';
var userName = document.getElementById('email').value;
var password = document.getElementById('password').value;
//Email Validation
var App = window.App || {};
var Validation = false;
var Validation = {
isValidEmail: function (email) {
return /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email);
}
};
App.Validation = Validation;
window.App = App;
}(window);