el-ladies

Web Scripts

Проверка полей при регистрации

• 19-12-2017 •

Есть множество готовых решений, где можно проверить правильность 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 сниппетов

Добавить комментарий

hentai xxx