Создать форму регистрации и авторизации
Здраствуйте,вот появилось такое задание,необходимо создать регистрационную форму с проверкой вводимых значений. Далее, если введённая информация корректная, проверить что в массиве зарегистрированных пользователей отсутствует информация о пользователе с данным логином, и, если это так, – сохранить, т.е. добавить новый объект в массив зарегистрированных пользователей. Я начала делать ,а как дальше и что дальше не понимаю
<!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, время: 21:43. |