Есть множество готовых решений, где можно проверить правильность E-mail и сложность пароля. Вот некоторые: validate.js, jquery-validation Но что если нужно по какой то причине, написать свой?
See the Pen Check for same password by Aleksandrs (@CoolS2) on CodePen.0
Валидация формы
HTML
Кроме полей и кнопки отправить, добавим список ошибок, которые будут показываться, если пользователь не учел одно из наших правил. А также добавим скрытый блок, куда будем выводить остальные ошибки.
<div class="big-black-block">
<div class="register-block">
<p class="login-button" id="reg-hide">Sign up</p>
<div class="input-block" id="input-block-register">
<input type="text" name="name_lastname" id="name_lastname_reg" placeholder="First name and last name" required />
<input type="email" name="email" id="email_reg" placeholder="E-mail" required />
<input type="password" class="register_inp" name="password_reg" id="password_reg" placeholder="Password" required>
<ul id="pswd_info">
<li id="letter" class="invalid">At least one letter</li>
<li id="capital" class="invalid">At least one capital letter</li>
<li id="number" class="invalid">At least one number</li>
<li id="length" class="invalid">Be at least 8 characters</li>
</ul>
<input type="password" class="register_inp" name="password_duplicate_reg" id="password_dup_reg" placeholder="Retype password">
<input type="hidden" id="input-from-bot-reg">
<button id="register_but">Sign up</button>
</div>
<p class="hidden-error-block"></p>
</div>
</div>
CSS
Все стили рассматривать мы не будем, а только основные
Скрываем блок со списком ошибок, а также блок для остальных ошибок. Остальные стили, чисто для того, чтобы пример выглядел приятно)
#pswd_info {
display:none;
}
.register-block .invalid, .restore-block .invalid {
padding-left:22px;
line-height:24px;
color:#ec3f41;
}
.register-block .valid, .restore-block .valid {
padding-left:22px;
line-height:24px;
color:#3a7d34;
}
.hidden-error-block{
text-align: center;
padding: 10px 0;
}
.big-black-block{
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: 99998;
width: 100%;
height: 500px;
background: rgba(0,0,0, 0.5);
}
.register-block{
max-width: 350px;
overflow: hidden;
margin: 0 auto;
background: #eaeaea;
padding: 15px 40px;
border-radius: 10px;
position: relative;
top: 20px;
font-family: 'Open Sans', sans-serif;
}
.input-block input{
padding: 12px;
margin-bottom: 10px;
width: 90%;
}
.input-block button{
width:100%;
border:none;
background: #b1572f;
color:#fff;
padding: 12px;
text-transform: uppercase;
border-radius: 6px;
transition: 0.5s;
cursor:pointer;
}
.input-block button:hover{
background: #fff;
color: #b1572f;
}
JQuery
А вот тут самое интересное.
Для начало добавим функцию, которая будет проверять правильность E-mail ( есть ли точка или собачка( причем и количество собачек тоже ) в строчке.
function validateEmail(email) {
var re = /^(([^<>()[\]\\.,;:\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,}))$/;
return re.test(email);
}
Дальше при клике на нашу кнопку, мы создаем следующие переменные:
var name = $('#name_lastname_reg').val();
var email = $('#email_reg').val();
var password = $('#password_reg').val();
var password_rep = $('#password_dup_reg').val();
Теперь будем проверять содержимое наших переменных
Если пароли не совпадают, добавим текст и цвет ошибки в наш скрытый блок
if(password != password_rep){
$('.hidden-error-block').html('The entered passwords do not match').css('color', 'red');
return false;
}
Если количество символов меньше 8, то выводим ошибку и красный цвет
else if(password.length < 8){
$('.hidden-error-block').html('Password does not match the requirements').css('color', 'red');
return false;
}
Если имя или e-mail не ввели..
else if(name == ''){
$('.hidden-error-block').html('You have to fill out all input boxes').css('color', 'red');
return false;
}
else if(email == ''){
$('.hidden-error-block').html('You have to fill out all input boxes').css('color', 'red');
return false;
}
Тут мы проверяем e-mail на наличие точки, собачки с помощью нашей функции validateEmail(), которую мы написали выше
else if(!validateEmail(email)){
$('.hidden-error-block').html('Email address you entered is not valid').css('color', 'red');
return false;
}
Тут проверяем пароль, правильно ли он продублирован, больше ли символов чем 7, есть ли в пароле и маленькие буквы и большие. И если все правильно, выводим good в поле ошибок, если нет, то выводим о том, что пароль не правильный.
else if( (password == password_rep) && (password.length > 7) && (password.match(/\d/)) && (password.match(/[A-Z]/)) && (password.match(/[A-z]/)) ){
$('.hidden-error-block').html('Good').css('color', 'green');
}else{
$('.hidden-error-block').html('Password does not match the requirements').css('color', 'red');
}
Когда пользователь начнет вводить пароль, показываем наш список правил для пароля. Также на каждый ввод символов, мы проверяем пароль на длину, регистр символов и на ввод хоть одной цифры. Если правило соблюдено добавляем класс valid, если нет, добавляем invalid (с заранее прописанными стилями). Так же, когда пользователь перейдет на следующее поле, список с правилами скрываем.
$('#password_reg').keyup(function () {
var pswd = $('#password_reg').val();
if ( pswd.length < 8 ) {
$('#length').removeClass('valid').addClass('invalid');
} else {
$('#length').removeClass('invalid').addClass('valid');
}
//validate letter
if ( pswd.match(/[A-z]/) ) {
$('#letter').removeClass('invalid').addClass('valid');
} else {
$('#letter').removeClass('valid').addClass('invalid');
}
//validate capital letter
if ( pswd.match(/[A-Z]/) ) {
$('#capital').removeClass('invalid').addClass('valid');
} else {
$('#capital').removeClass('valid').addClass('invalid');
}
//validate number
if ( pswd.match(/\d/) ) {
$('#number').removeClass('invalid').addClass('valid');
} else {
$('#number').removeClass('valid').addClass('invalid');
}
}).focus(function() {
$('#pswd_info').show(500);
}).blur(function() {
$('#pswd_info').hide(500);
});
А тут мы проверяем на повтор пароля
$('#password_dup_reg').keyup(function () {
var pas = $('#password_reg').val();
var con_pas = $(this).val();
if(pas === con_pas){
$('.register_inp').css('border-color', 'seagreen');
}else{
$('.register_inp').css('border-color', 'red');
}
});
Важно!
Вот и все. Это лишь пример, который можно еще и дорабатывать и дорабатывать, не стоит сразу копировать и вставлять себе в проект. Весь код написано исключительно для ознакомительных целей.
Задавайте свои вопросы в комментариях, рад буду ответить! Так же можете почитать о Топ 5 сниппетов