19.06.2021, 13:34
|
Новичок на форуме
|
|
Регистрация: 09.05.2021
Сообщений: 9
|
|
Вызов следующего файла
Добрый день,
После проверки ввода username, email и password и нажатии на кнопку "Enter" должны вызвать следующий файл "new.html", который запомнит имя пользователя при условии правильного ввода почтового адреса и пароля.
В этом у меня проблема, не знаю как записать
<button class="button button1">Enter</button>
<form id="form" class="form">
<div class="main">
<div class="form-control">
<input class="reg_input" type="text" placeholder="Username" id="username" />
<i class="fas fa-check-circle"></i>
<i class="fas fa-exclamation-circle"></i>
<small>Error message</small>
</div>
<div class="form-control">
<input class="reg_input" type="email" placeholder="Email" id="email" />
<i class="fas fa-check-circle"></i>
<i class="fas fa-exclamation-circle"></i>
<small>Error message</small>
</div>
<div class="form-control">
<input class="reg_input" type="password" placeholder="Password" id="password"/>
<i class="fas fa-check-circle"></i>
<i class="fas fa-exclamation-circle"></i>
<small>Error message</small>
</div>
</div>
<button class="button button1">Enter</button>
</form>
const form = document.getElementById('form');
const username = document.getElementById('username');
const email = document.getElementById('email');
const password = document.getElementById('password');
const password2 = document.getElementById('password2');
form.addEventListener('submit', e => {
e.preventDefault();
checkInputs();
let user = checkInputs()
if (user.isValid){
localStorage.setItem("user",JSON.stringify(user))
}
});
function checkInputs() {
// trim to remove the whitespaces
const usernameValue = username.value.trim();
const emailValue = email.value.trim();
const passwordValue = password.value.trim();
const password2Value = password2.value.trim();
let isValid = true
if(usernameValue === '') {
setErrorFor(username, 'Username cannot be blank');
isValid = false
} else {
setSuccessFor(username);
}
if(emailValue === '') {
setErrorFor(email, 'Email cannot be blank');
isValid = false
} else if (!isEmail(emailValue)) {
setErrorFor(email, 'Not a valid email');
isValid = false
} else {
setSuccessFor(email);
}
if(passwordValue === '') {
setErrorFor(password, 'Password cannot be blank');
isValid = false
} else {
setSuccessFor(password);
}
if(password2Value === '') {
setErrorFor(password2, 'Password2 cannot be blank');
isValid = false
} else if(passwordValue !== password2Value) {
setErrorFor(password2, 'Passwords does not match');
isValid = false
} else{
setSuccessFor(password2);
}
return {usernameValue,emailValue,passwordValue, isValid}
}
function setErrorFor(input, message) {
const formControl = input.parentElement;
const small = formControl.querySelector('small');
formControl.className = 'form-control error';
small.innerText = message;
}
function setSuccessFor(input) {
const formControl = input.parentElement;
formControl.className = 'form-control success';
}
function isEmail(email) {
return /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(email);
}
// SOCIAL PANEL JS
const floating_btn = document.querySelector('.floating-btn');
const close_btn = document.querySelector('.close-btn');
const social_panel_container = document.querySelector('.social-panel-container');
floating_btn.addEventListener('click', () => {
social_panel_container.classList.toggle('visible')
});
close_btn.addEventListener('click', () => {
social_panel_container.classList.remove('visible')
});
|
|
19.06.2021, 13:58
|
Профессор
|
|
Регистрация: 07.11.2013
Сообщений: 4,662
|
|
Janejane, а на чем у вас сайт, какая CMS, обычно там регистрация пользователей предусмотрена? Как минимум нужен сервер, серверный язык и база данных, чтобы делать регистрацию на сайте.
|
|
19.06.2021, 14:08
|
Новичок на форуме
|
|
Регистрация: 09.05.2021
Сообщений: 9
|
|
Это просто задание такое, нужно просто вызвать другой файл и чтобы он помнил имя пользователя. Использую только html файлы, css и js.
|
|
19.06.2021, 14:19
|
Профессор
|
|
Регистрация: 07.11.2013
Сообщений: 4,662
|
|
Janejane, понятно, ты уже записал (запомнил) в этом файле в строке localStorage.setItem("user",JSON.stringify(user)), в new.html ты можешь сделать обратное действие, прочитать, let user = JSON.parse(localStorage.getItem("user")) и вывести в нужном месте.
|
|
19.06.2021, 18:45
|
Новичок на форуме
|
|
Регистрация: 09.05.2021
Сообщений: 9
|
|
Оказывается немного неверно была поставлена задача. В общем:
index.html
Username (Вводим имя)
Email (Вводим почту)
Password (Вводим пароль)
Registration (Кнопка для вызова следующего файла, где вводится имя и пароль и в этом файле произойдет проверка с данными первого файла)
index.html
<script src="main.js"></script>
</head>
<body>
<form id="form" class="form">
<div class="mtavari">
<div class="form-control">
<input class="reg_input" type="text" placeholder="Username" id="username" />
<i class="fas fa-check-circle"></i>
<i class="fas fa-exclamation-circle"></i>
<small>Error message</small>
</div>
<div class="form-control">
<input class="reg_input" type="email" placeholder="Email" id="email" />
<i class="fas fa-check-circle"></i>
<i class="fas fa-exclamation-circle"></i>
<small>Error message</small>
</div>
<div class="form-control">
<input class="reg_input" type="password" placeholder="Password" id="password"/>
<i class="fas fa-check-circle"></i>
<i class="fas fa-exclamation-circle"></i>
<small>Error message</small>
</div>
<div class="form-control">
<a class="button button1" href="login.html">Registration</a>
</div>
</div>
</form>
login.html
Username (Вводим имя)
Password (Вводим пароль)
Login (кнопка для проверки имени и пароля с данными index.html и если всё верно, то вызовет следующий файл)
login.html
<script src="main.js"></script>
<script>
let user = JSON.parse(localStorage.getItem("user"))
</script>
</head>
<body>
<form id="form" class="form">
<div class="mtavari">
<div class="form-control">
<input class="reg_input" type="text" placeholder="Username" id="username" />
<i class="fas fa-check-circle"></i>
<i class="fas fa-exclamation-circle"></i>
<small>Error message</small>
</div>
<div class="form-control">
<input class="reg_input" type="password" placeholder="Password" id="password"/>
<i class="fas fa-check-circle"></i>
<i class="fas fa-exclamation-circle"></i>
<small>Error message</small>
</div>
<div class="form-control">
<a class="button button1" href="watch_1.html">Login</a>
</div>
</div>
</form>
В login.html должна произойти проверка имени и пароля, чтонепонятно пока как сделать.
В main.js у меня находится сам код, который в первом сообщении был указан.
|
|
19.06.2021, 20:32
|
Новичок на форуме
|
|
Регистрация: 09.05.2021
Сообщений: 9
|
|
В login.html добавлен код, но всё равно не работает
<script>
let user = JSON.parse(localStorage.getItem("user"))
let password = JSON.parse(localStorage.getItem("password"))
function check() {
if(username2Value === '') {
setErrorFor(username2, 'Username cannot be blank');
isValid = false
} else if(username2Value !== usernameValue) {
setErrorFor(username2, 'Username does not match');
isValid = false
} else{
setSuccessFor(username2);
}
if(password2Value === '') {
setErrorFor(password2, 'Password cannot be blank');
isValid = false
} else if(passwordValue !== password2Value) {
setErrorFor(password2, 'Passwords does not match');
isValid = false
} else{
setSuccessFor(password2);
}
</script>
|
|
19.06.2021, 22:18
|
Профессор
|
|
Регистрация: 07.11.2013
Сообщений: 4,662
|
|
Janejane,
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Index</title>
</head>
<body>
<a href="signin.html">Sign in</a> | <a href="signup.html">Sign up</a>
</body>
</html>
signup.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sign up</title>
<script src="signup.js"></script>
</head>
<body>
<form name="signup">
<input type="text" name="username" placeholder="Username" required>
<input type="email" name="email" placeholder="Email" required>
<input type="password" name="password" placeholder="Password" required>
<button>Sign up</button>
</form>
</body>
</html>
signup.js
document.addEventListener('DOMContentLoaded', function() {
this.signup.addEventListener('submit', function(event) {
event.preventDefault();
const database = JSON.parse(localStorage.getItem('database')) || [];
const newUser = { username: this.username.value, email: this.email.value, password: this.password.value };
const isUser = database.some(oldUser => newUser.username == oldUser.username);
if (isUser) return alert('Username is taken');
database.push(newUser);
localStorage.setItem('database', JSON.stringify(database));
location.href = 'signin.html';
});
});
signin.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sign in</title>
<script src="signin.js"></script>
</head>
<body>
<form name="signin">
<input type="text" name="username" placeholder="Username" required>
<input type="password" name="password" placeholder="Password" required>
<button>Sign in</button>
</form>
</body>
</html>
signin.js
document.addEventListener('DOMContentLoaded', function() {
this.signin.addEventListener('submit', function(event) {
event.preventDefault();
const database = JSON.parse(localStorage.getItem('database')) || [];
const newUser = { username: this.username.value, password: this.password.value };
const isUser = database.some(oldUser => newUser.username == oldUser.username && newUser.password == oldUser.password);
if (!isUser) return alert('Incorrect username or password');
location.href = 'content.html';
});
});
content.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Content</title>
</head>
<body>
Content
</body>
</html>
|
|
19.06.2021, 23:26
|
Новичок на форуме
|
|
Регистрация: 09.05.2021
Сообщений: 9
|
|
Rise,
Огромное спасибо, переделала под свой вариант и по-моему получилось так, как нужно было. Завтра мне уже точнее скажут, так надо было сделать или нет. Но по-моему всё сделано так, как нужно.
В самой логике тоже разобралась и поняла, где и в чем я ошибалась.
Еще раз спасибо!!!
|
|
|
|