Форум

AsCross · #1 (**permalink**) 18.07.2014, 17:31

Сделал форму регистрации (пока без отправки куда либо). Хочу сделать проверку на соответствие паролей(пароль:*****; повторите пароль:******), что бы оно выводило возле поля "повторите пароль" сообщение в случае если пароли не совпадают.

вот JS

if (window.addEventListener) window.addEventListener("load", init, false);


function init() {
    for (var i = 0; i < document.forms.length; i++) {
        var form = document.forms[i];

        var formValidation = false;

        for (var j = 0; j < form.elements.length; j++) {
            var e = form.elements[j];

            
            

            
            var pattern = e.getAttribute("data-val");

            if (pattern) {
                e.onkeyup = validateInput; 
                formValidation = true; 
            }
        }
        if (formValidation) {
            form.onsubmit = validateForm; 
        }


    }

}


function validateInput() {
    var pattern = this.dataset.val,
        msg = this.dataset.valMsg,
        msgId = this.dataset.valMsgId,
        value = this.value;

    var res = value.search(pattern);
    if (res == -1) {
        document.getElementById(msgId).innerHTML = "<img src='bad.png'/>" + msg;
        this.className = "error";
    }
    else {
        document.getElementById(msgId).innerHTML = "<img src='ok.png'/>";
        this.className = "valid";
    }

    


}

function validateForm() {

    var invalid = false;

    for (var i = 0; i < this.elements.length; ++i) {
        var e = this.elements[i];
        if (e.type == "text", "password" && e.onkeyup != null) {
            e.onkeyup();
            if (e.className == "error") invalid = true;
        }
    }

    if (invalid) {
        alert("Допущены ошибки при заполнении формы.");
        return false;
    }
}

function pass() {
    
    var pass1 = document.getElementById("pass1").value;
    var pass2 = document.getElementById("pass2").value;

    if (pass1 != pass2) {
    alert("Пароли не совпадают");
    
}
}

Ну и HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Регалка</title>
    <script type="text/javascript" src="script.js"></script>

   

    <style>
        .error {
            background-color: Pink;
        }

        .valid {
            background-color: LightGreen;
        }
    </style>

</head>
<body>
   

    <form name="form1">

        Имя <input type="text" 
                   name="fname" 
                   data-val="\S" 
                   data-val-msg="Введите имя" 
                   data-val-msg-id="fname" />
        <span id="fname"></span> <br />
        
        Фамилия <input type="text" 
                       name="sname" 
                       data-val="\S" 
                       data-val-msg="Введите фамилию" 
                       data-val-msg-id="sname" />
        <span id="sname"></span><br />

        Логин <input type="text" 
                     name="login" 
                     data-val="\S[A-Za-z0-9]" 
                     data-val-msg="Введите логин" 
                     data-val-msg-id="login" />
        <span id="login"></span><br />

        Пароль <input type="password" 
                      name='pass1' 
                      data-val="\S[A-Za-z0-9]{7,8}" 
                      data-val-msg="Введите пароль(длинна пароля должна состоять не мение 8 символов)" 
                      data-val-msg-id="pass1" />
        <span id='pass1'></span>
        
                                                                     <br />

        Подтверждение пароля <input type="password" 
                                    value="" 
                                    name='pass2' 
                                    onblur="pass"
                                    data-val="\S[A-Za-z0-9]" 
                                    data-val-msg="Пароли должны совпадать" 
                                    data-val-msg-id="pass2" /> 
        
        <span id='pass2'></span>
                                                                     <br />
        Email <input type="text" 
                     name="mail" 
                     data-val="(\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,6})" 
                     data-val-msg="Введите email" 
                     data-val-msg-id="mail" />
        <span id="mail"></span><br />

        Телефон <input type="text" 
                       name="phone" 
                       placeholder="067 123 45 67" 
                       data-val="\d{3} \d{3} \d{2} \d{2}" 
                       data-val-msg="Введите номер телефона" 
                       data-val-msg-id="phone" />
        <span id="phone"></span>
        
        <br />Выберите ваш пол:<br />
        <input type="radio" name="pol" checked="checked" />Женщина
        <input type="radio" name="pol" />Мужчина
       
        
        <br /><br />
        <input type="reset" name="reset1" value="Заполнить заново" />
        <input type="submit" value="Регистрация" />
    </form>


</body>

newobject · #2 (**permalink**) 18.07.2014, 22:58

На ночь глядя голова не соображает, сплел вот такую вот ахинею

<input name="pass" />
<input name="pass" />
<div id="iscorrect" style="display: none">Не верно!</div>
<script>
input1=document.getElementsByName("pass")[0]
input2=document.getElementsByName("pass")[1]
div=document.getElementById("iscorrect")
f=function(another, flagvalue){return function(){
var flag=flagvalue;
if((!flag)&&(another.value!==this.value)) return div.style.display="block"; div.style.display="none"}}
input1.onblur=f(input2, true)
input2.onblur=f(input1, false)
</script>

толком не тестил, если будете пробовать, отпишитесь.

PS При такой реализации всплывает одна проблемка: если юзер после корректного ввода полезет править снова первое поле, а второе потом не поправит, собщение не всплывет. Это можно разрешить на крайняк, если надо, дополнительной проверкой по клику на следующем (после второго инпута - например мыло) поле. Слишком усложнять логику -- тоже не Ъ.

AsCross · #3 (**permalink**) 23.07.2014, 12:46

Не работает((( Кто то может добавить проверку на соответствие паролей между собой и вписать это прямо в мой код? Буду очень благодарен!

kostyanet · #4 (**permalink**) 23.07.2014, 14:17

alert("Пароли не совпадают");

Задача не имеет смысла. В браузерах пароли не проверяют, ибо их туда придется загрузить, а это значит любой юзер в два счета узнает все пароли всех юзеров и зайдет под любым. Даже аяксом в браузер пароль, один, для юзера который сказал как его зовут - не грузят. Ибо и в браузере или по заголовку можно его увидеть и ввести все совпадет.

Ну то есть вам все равно не пригодится работающий скрипт проверки пароля, поскольку оно делается только на сервере.

kostyanet · #5 (**permalink**) 23.07.2014, 14:23

Цитата:

(пока без отправки куда либо).

Так не делается, и в этом смысла нет. Допустим есть такой юзер в БД - вы скажете об этом юзеру после отправки формы. Допустим есть такой имейл, или там телефон - аналогично. Все эти проверки по существу включают и проверку пароля, поскольку делаются на сервере. В браузер приходит только ответ, типа "облом" или "ок". Что касается проверки форматов и синтаксиса, то пусть каждый пишет в силу своей грамотности. Не мешайте людям тупить и они поумнеют.

AsCross · #6 (**permalink**) 23.07.2014, 17:40

Я хочу что бы при регистрации проверяло соответствие паролей между собой когда человек будет их вводить, то есть не отправлять форму на сервер пока они не будут одинаковы. Сервер это отдельный разговор, мне именно что бы "облом" или "ок".

Форум

Справочник

Discord чат

Курсы javascript