Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Как вывести окно ввода пароля? (https://javascript.ru/forum/misc/63679-kak-vyvesti-okno-vvoda-parolya.html)

Светлана1996 22.06.2016 17:31

Как вывести окно ввода пароля?
 
У меня есть проблема. В университете дали задание сделать сайт с помощью html, но на одной из страниц этого сайта должен быть пароль формата javascript. Вот с ним и возникли проблемы. Условия пароля таковы: тип пароля текстовый, алгоритм проверки корректности пароля - последняя буква следует после первой, то есть например пароль начинается на а, в середине пароля могут быть абсолютно любые буквы, а оканчиваться он должен на любую букву, которая по алфавиту идет после а, то есть остальные 32 буквы. Помогите

laimas 24.06.2016 23:48

> должен быть пароль формата javascript.


Это университетские кураторы именно так сформулировали задание или это так студенты трактуют? :)

рони 25.06.2016 00:31

Светлана1996,
а после буквы я что?

Светлана1996 25.06.2016 00:59

Цитата:

Сообщение от рони (Сообщение 420351)
Светлана1996,
а после буквы я что?

это не уточнялось преподавателем. может быть а

рони 25.06.2016 01:05

Светлана1996,
ок но сложно помочь на пустом месте.

laimas 25.06.2016 01:08

Цитата:

Сообщение от Светлана1996
это не уточнялось преподавателем.


Задание по смыслу более чем странное )
Пароля в формате js не бывает, у пароля вообще нет никакого формата, можно задать условия. А проверку пароля современные браузеры производят сами.

<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<style>
input {
    width: 300px;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 5px;
}

input:required:invalid:focus {
    background-color: #FEEBEB
}

input:required:valid:focus {
    background-color: #E1F5D0
}

:focus::-moz-placeholder, :focus:-moz-placeholder {
    color: transparent
}

#error {
    visibility: hidden;
    color: #f00;
    margin-bottom: 8px;
}
</style> 
<script>
//возможность нативной проверки браузером
var ptr = (function() {
    var i = document.createElement('input');
    return 'pattern' in i
}());

function testPass(o) {
    //если браузер с поддержкой HTML5, то проверка ввода средствами браузера
    if(ptr) return;
    //иначе проверяем регулярным выражением
    document.getElementById('error').style.visibility = !new RegExp(o.pattern).test(o.value) ? 'visible' : 'hidden';
} 
</script>     
</head> 
<body>
<div id="error">Ввод некорректного пароля!</div>
<input type="password" 
       required="" 
       pattern="[aA]{1}[zZ]{1}[a-zA-Z]{4,}" 
       placeholder="Длина пароля не менее 6 символов" 
       onkeyup="testPass(this)" 
       autocomplete="off" />
</body> 
</html>


Примечание: если ваш куратор поверит вам, что вы дока в регулярных выражениях, то паттерн можно записать и иначе.
Пароль чем длиннее тем лучше, чем более разнообразны символы в нем, тем лучше, использовать регистр, это замечательно. Условия же кураторов полнейшая глупость. :)

рони 25.06.2016 01:13

laimas,
интересно причём тут регулярные выражения?

laimas 25.06.2016 01:26

Цитата:

Сообщение от рони
интересно причём тут регулярные выражения?

С таким же успехом можно спросить, а при чем тут проверка посимвольно строки?

рони 25.06.2016 02:00

laimas,
вариант того как я понял задание ... правильные пароли араб , яшКа, Лайм. проверка только крайних букв пароля.
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
   .err:after{
     content: "error";
     color: red;
      margin-left: 6px;
   }

 </style>

  </script>
</head>

<body>
<form id="main" action="http://">
<label for="pas"><input id="pas" name="pas" type="password"></label>
</form>


<script>
window.addEventListener("DOMContentLoaded", function() {
    var form = document.querySelector("#main"),
        pas = form.querySelector("#pas"),
        lab = form.querySelector('[for="pas"]'),
        str = "абвгдежзийклмнопрстуфхцчшщъыьэюя";
    pas.addEventListener("input", function() {
        var val = pas.value,
            first = val.substr(0, 1).toLowerCase(),
            last = val.substr(-1).toLowerCase(),
            i = str.indexOf(first),
            d = str.indexOf(last);
        console.log(first, last);
        if (i == str.length - 1 && !d || i > -1 && i + 1 == d) lab.classList.remove("err");
        else lab.classList.add("err")
    })
});
</script>
</body>
</html>

laimas 25.06.2016 02:04

Я вообще не понимаю какое отношение имеет араб , яшКа, Лайм к паролю, это скорее задание о логине, а не пароле тогда.

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


Часовой пояс GMT +3, время: 19:56.