Создать форму регистрации и авторизации
Здраствуйте,вот появилось такое задание,необходимо создать регистрационную форму с проверкой вводимых значений. Далее, если введённая информация корректная, проверить что в массиве зарегистрированных пользователей отсутствует информация о пользователе с данным логином, и, если это так, – сохранить, т.е. добавить новый объект в массив зарегистрированных пользователей. Я начала делать ,а как дальше и что дальше не понимаю
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
table{
background:#eeeeee;
padding:5px;
border:1px #777777 solid;}
.vld{ background:#eeeeee;
border:0px}
.zorka,.vld{color:red;}
</style>
<script>
var myForm;
function textValid(txt, objMessage)
{
if (txt=="")
{
objMessage.value = "Поле не заполнено";
return false;
}
objMessage.value = "";
return true;
}
function loginValid(logi)
{
if (logi=="")
{
myForm.vLog.value = "Поле не заполнено";
return false;
}
var lg = /^[a-zA-Z1-9]+$/i;
if (!lg.test(logi))
{
myForm.vLog.value = "Неправильный логин";
return false;
}
else
{
myForm.vLog.value ="";
return true;
}
}
function passValid(pass1, pass2)
{
if (pass1 == "" )
{
myForm.vPass.value = "Поле не заполнено";
return false;
}
if (pass1.length < 6)
{
myForm.vPass.value = "Пароль короткий";
return false;
}
if (pass2 == "" )
{
myForm.vPass.value = "Повтор пароля не заполнен";
return false;
}
if (pass1!=pass2)
{
myForm.vPass.value = "Пароли не совпадают";
}
else
{
myForm.vPass.value ="";
return true;
}
}
function validate(mF)
{
myForm = mF;
var ima = textValid(myForm.ima.value,myForm.vIma);
var fam = textValid(myForm.family.value,myForm.vFam);
var login = loginValid(myForm.login.value);
var pass = passValid(myForm.pass1.value);
return ima&&fam&&login&&pass;
}
return false;
</script>
</head>
<body>
<table >
<tr><td colspan="3" align="center"><h3>Регистрационная форма</h3></td></tr>
<form name="myForm" onsubmit="return validate(this);">
<tr><td>Имя<span class="zorka">*</span></td><td><input type="text" name="ima" maxlength = "16" ></td><td><input type="text" class="vld" name="vIma" readonly ></td></tr>
<tr><td>Фамилия<span class="zorka">*</span></td><td><input type="text" name="family" maxlength = "16" ></td><td><input type="text" class="vld" name="vFam" readonly ></td></tr>
<tr><td>Логин<span class="zorka">*</span></td><td><input type="text" name="login" maxlength = "10" ></td><td><input type="text" class="vld" name="vLog" readonly ></td></tr>
<tr><td>Пароль<span class="zorka" name="vPass">*</span></td><td><input type="password" name="pass1" maxlength = "10"></td><td><input type="text" class="vld" name="vPass" readonly ></td></tr>
<tr><td>Повторите пароль<span class="zorka">*</span></td><td><input type="password" name="pass2" maxlength = "10"></td><td></td></tr>
<tr><td></td><td colspan="2"><input type="submit" value="Зарегистрироваться"> <input type="submit" value=" ко
Вход"></td></tr>
</form>
</table>
</body>
</html>
|
noname122,
можно держать массив пользователей в браузере, читать про localStorage искать примеры на форуме. в строке 17 вашего кода доставать этот массив и работать с ним. |
так в этом и проблема я пролистала весь интернет читала ,но ничего не понялаа как можно реализовать именно в моей коде,поможете?
|
noname122,
не проверял, но логика примерно такая ...
function validate(mF) {
myForm = mF;
var ima = textValid(myForm.ima.value, myForm.vIma);
var fam = textValid(myForm.family.value, myForm.vFam);
var login = loginValid(myForm.login.value);
var pass = passValid(myForm.pass1.value);
var people = JSON.parse(window.localStorage.getItem("people") || "[]");
if (ima && fam && login && pass) {
var i = myForm.ima.value,
f = myForm.family.value;
var index = people.findIndex(a => a.i == i && a.f == f);
if (index == -1) {
alert("о новенький!");
people.push({
i,
f
});
window.localStorage.setItem("people", JSON.stringify(people))
} else {
alert(`Привет ${i} ${f}`);
}
}
return ima && fam && login && pass;
}
|
все равно что-то не работает,0 реакции
|
noname122,
:-? |
Можете проверить,может на деле поймете в чем проблема
|
рони,
поможете ,я ночь не спала,искала,рассатривала, о попытки увенчались неудачей + еще и не выспалась |
Я уже нашла такой метод но как реализовать его под мой код не понимаю,поможете?
function Go(Form){
var text = [4];
text[0] = document.getElementById("1");
text[1] = document.getElementById("2");
text[2] = document.getElementById("3");
text[3] = document.getElementById("4");
var mt = [4];
for (let i = 0; i < 4; i++){mt[i] = false}
if(Form.tl.value != ""){
let n = 0;
for (let i = 0; i < Form.tl.value.length; i++){
if(Form.tl.value[i] >= 'a' && Form.tl.value[i] <= 'z'){n++}else{n = 0; break;}
}
if(n >= 4 && n <= 8){
mt[0] = true;
}
}
if(Form.te.value != ""){
let i = 0, n = 0;
for (; i < Form.te.value.length && Form.te.value[i] != '@'; i++){
if(Form.te.value[i] >= 'A' && Form.te.value[i] <= 'Z' || Form.te.value[i] >= 'a' && Form.te.value[i] <= 'z' || Form.te.value[i] >= '0' && Form.te.value[i] <= '9' || Form.te.value[i] == '.' && n != 0 && Form.te.value[i+1] != '@'){n++}
else {n = 0; break;}
}
if(n >= 2){
n = 0;
i++;
for (; i < Form.te.value.length && Form.te.value[i] != '.'; i++){
if(Form.te.value[i] >= 'a' && Form.te.value[i] <= 'z'){n++}
else {n = 0; break;}
}
if(n >= 1){
i++;
let str = "";
for (; i < Form.te.value.length; i++){
str += Form.te.value[i];
}
if(str == 'ua' || str == 'com' || str == 'ru' || str == 'ch' || str == 'cz' || str == 'net' || str == 'edu.ua'){mt[1] = true}
}
}
}
if(Form.tp1.value != ""){
let n = 0;
let n1 = 0;
let n2 = 0;
for (let i = 0; i < Form.tp1.value.length; i++){
if(Form.tp1.value[i] >= 'A' && Form.tp1.value[i] <= 'Z'){n++}
if(Form.tp1.value[i] >= 'a' && Form.tp1.value[i] <= 'z'){n1++}
if(Form.tp1.value[i] >= '0' && Form.tp1.value[i] <= '9' ){n2++}
}
let n3 = Form.tp1.value.length - n - n1 - n2;
if(n >= 1 && n1 >= 1 && n2 >= 1 && n3 >= 1 && Form.tp1.value.length >= 8){mt[2] = true}
}
if(Form.tp2.value == Form.tp1.value && Form.tp2.value != ""){mt[3] = true}
let m = 0;
for (let i = 0; i < 4; i++){
if(mt[i] == false){
text[i].style.color = 'red';
}
else { text[i].style.color = 'rgb(132, 170, 221)'; m++}
}
t = document.getElementById("t");
if(m == 4){
t.innerHTML = "регистрация прошла успешно";
}
else{t.innerHTML = "";}
}
|
| Часовой пояс GMT +3, время: 19:57. |