Регистрация на javascript / HTML, JavaScript, VBScript, CSS

ReSQL.ru

Мобильная версия Контакт Правила FAQ Помощь

Гость

Войти | Регистрация | Профиль | Очистить

Новые сообщения | Избранное

Форумы | Пользователи | Статистика | Мод. лог | Поиск

Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр

Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Регистрация на javascript

5 сообщений из 5, страница 1 из 1

Регистрация на javascript

#40078866

Janenno

Гость

Здравствуйте,

Здесь мне надо сделать регистрацию на Javascript. В login.html должна произойти проверка имени и пароля, но непонятно пока что, как именно это осуществить.

index.html
Username (Вводим имя)
Email (Вводим почту)
Password (Вводим пароль)
Registration (Кнопка для вызова следующего файла, где вводится имя и пароль и в этом файле произойдет проверка с данными первого файла)

index.html

Код: html

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.

<script src="main.js"></script>	
</head>
 <body>
 	<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 class="form-control">
            <a class="button button1" href="login.html">Registration</a>
        </div>			
		</div>
	</form>

login.html
Username (Вводим имя)
Password (Вводим пароль)
Login (кнопка для проверки имени и пароля с данными index.html и если всё верно, то вызовет следующий файл)

login.html

Код: html

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.

<script src="main.js"></script>	
<script>
	let user = JSON.parse(localStorage.getItem("user"))	
</script>
</head>
 <body>
 	<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="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>

main.js

Код: javascript

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.

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')
});

...

Рейтинг:

0 / 0

19.06.2021, 19:52

| Ответить | Цитировать | Написать

Регистрация на javascript

#40078872

Janenno

Гость

В login.html добавлен следующий код, но всё равно не работает

Код: javascript

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.

	
<script>
let user = JSON.parse(localStorage.getItem("user"))
let password = JSON.parse(localStorage.getItem("password"))

function check() {
	if(usernameValue === '') {
		setErrorFor(username2, 'Username cannot be blank');
        isValid = false
	} else if(usernameValue !== username2Value) {
		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>

...

Рейтинг:

0 / 0

19.06.2021, 20:28

| Ответить | Цитировать | Написать

Регистрация на javascript

#40078881

Janenno

Гость

небольшая опечатка произошла, но всё также не работает

Код: javascript

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.

<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>

...

Рейтинг:

0 / 0

19.06.2021, 20:43

| Ответить | Цитировать | Написать

Регистрация на javascript

#40078890

Janenno

Гость

Новый вариант прикреплен в файле

...

Рейтинг:

0 / 0

19.06.2021, 22:34

| Ответить | Цитировать | Написать

Регистрация на javascript

#40078932

big-duke

Участник

Сообщения: 6 245

Рейтинг: 0 / 0

Janenno,

Выложите код на codesandbox или что-то похожее

...

Рейтинг:

0 / 0

20.06.2021, 10:15

| Ответить | Цитировать | Написать

5 сообщений из 5, страница 1 из 1

Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Регистрация на javascript

Цитировать

Написать

Автор*:

Ввести пароль для входа

Тема*:

Сообщение

Данное сообщение тематическое

Сообщение содержит картинки или видео 18+

Автор:

ВНИМАНИЕ! На данном подфоруме действуют строгие правила. Удостоверьтесь, что ваше сообщение соответствует им!

Форум или тема закрыты для гостей. Необходима авторизация!

Загрузить последнюю сохраненную версию

Вложение:

Вставить как галерею

Максимальный размер вложений: 4,0 МБ, аудио/видео: 8,0 МБ. Картинки большего размера ужимаются, если возможно.

Введите код, изображенный на картинке. Если код нечитаемый, кликните картинку, чтобы загрузить другой вариант.

Отправляя сообщение, я выражаю свое согласие с правилами форума и принимаю пользовательское соглашение.

Читали тему (0):

Читали форум (0):

Пользователи онлайн (0):

start [/forum/topic.php?fid=22&msg=40078932&tid=1443224]:	0ms
get settings:	9ms
get forum list:	11ms
check forum access:	3ms
check topic access:	3ms
track hit:	30ms
get topic data:	10ms
get forum data:	2ms
get page messages:	42ms
get tp. blocked users:	2ms
others:	12ms

total:	124ms