ReSQL.ru
     
powered by simpleCommunicator - 2.0.59     © 2025 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Регистрация на javascript
5 сообщений из 5, страница 1 из 1
Регистрация на javascript
    #40078866
Janenno
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
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
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
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
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
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
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Janenno
Гость
Новый вариант прикреплен в файле
...
Рейтинг: 0 / 0
19.06.2021, 22:34
| Ответить | Цитировать | Написать  
Регистрация на javascript
    #40078932
Фотография big-duke
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
big-duke
Участник
Janenno,

Выложите код на codesandbox или что-то похожее
...
Рейтинг: 0 / 0
20.06.2021, 10:15
| Ответить | Цитировать | Написать  
5 сообщений из 5, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Регистрация на javascript
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]