Гость
Войти | Профиль | Очистить
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Регистрация на javascript / 5 сообщений из 5, страница 1 из 1
19.06.2021, 19:52
    #40078866
Janenno
Janenno
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Регистрация на javascript
Здравствуйте,

Здесь мне надо сделать регистрацию на 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, 20:28
    #40078872
Janenno
Janenno
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Регистрация на javascript
В 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:43
    #40078881
Janenno
Janenno
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Регистрация на javascript
небольшая опечатка произошла, но всё также не работает

Код: 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, 22:34
    #40078890
Janenno
Janenno
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Регистрация на javascript
Новый вариант прикреплен в файле
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
20.06.2021, 10:15
    #40078932
big-duke
big-duke
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Регистрация на javascript
Janenno,

Выложите код на codesandbox или что-то похожее
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Регистрация на javascript / 5 сообщений из 5, страница 1 из 1
Целевая тема:
Создать новую тему:
Автор:
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение
созд. / загр.: 392ms
Закрыть
start [/forum/topic.php?fid=22&tablet=1&tid=1443224]:
 0ms
get settings:
 10ms
get forum list:
 14ms
check forum access:
 4ms
check topic access:
 4ms
track hit:
 34ms
get topic data:
 14ms
get forum data:
 3ms
get page messages:
 48ms
get tp. blocked users:
 2ms
others: 259ms
total:  392ms
x
x
Закрыть


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