Проверка на введенные символы

333

12 сентября 2017, 10:25

Здравствуйте! Делаю проверку на введенные символы в поле логин на стороне клиента. Нужно чтобы при введение русских символов отображалась ошибка, использую такой код:

$(document).ready(function() {
  $('#signupur-login').keyup(function(){
    if($(this).val() != '') {
      var pattern = /[a-zA-Z0-9]/;
       if(pattern.test($(this).val())){                                                                                                  
           $(this).css({'border' : '1px solid #ebebeb'});
           $('#valid').text('');                                                                                               
       } else {
            $(this).css({'border' : '1px solid #ff0000'});                                                                                                    
            $('#valid').text('Только латинские символы и цифры');                                                                                              
       }
    } else {
       $(this).css({'border' : '1px solid #ff0000'});                                                                                                
       $('#valid').text('Поле не должно быть пустым');                                                                                           
    }                                                                                      
});

});

Дело в том, что этот код работает неправильно, если сначала ввести кирилицу, то поле подсветится, но если потом сразу начать вводить латиницу, то ошибка пропадает. Как заставить проверять не только последний введенный символ, но и всю строку целиком?

Answer 1

Неправильный шаблон регулярного выражения. В вашем случаи строка проверяется на наличие латинской буквы или цифры. Соответвенно, логично то поведение, что вы описываете, и как только выводится латинская буква или цифра - всегда будет true

Надо изменить шаблон, например на такой:

/^[a-z0-9]+$/i

Где ^ - начало строки, затем [a-z0-9] - латинская буква или цифра, + - сколько угодно раз встречающиеся в строке, $ - конец строки. Флаг i игнорирует зависимость от регистра. То есть S и s будет считаться одним и тем же.

Также, вместо keyup лучше будет использовать input. Так как, например, "вставить текст пкм" keyup не отловит.

Итого, ваш пример:

$(document).ready(function() { 
	$('#signupur-login').on('input', function() { 
		if ($(this).val() != '') { 
			var pattern = /^[a-z0-9]+$/i; 
			if (pattern.test($(this).val())) { 
				$(this).css({ 
					'border': '1px solid #ebebeb' 
				}); 
				$('#valid').text(''); 
			} else { 
				$(this).css({ 
					'border': '1px solid #ff0000' 
				}); 
				$('#valid').text('Только латинские символы и цифры'); 
			} 
		} else { 
			$(this).css({ 
				'border': '1px solid #ff0000' 
			}); 
			$('#valid').text('Поле не должно быть пустым'); 
		} 
	}); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script> 
<input type="text" id="signupur-login"> 
<div id="valid"></div>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

Подробнее о сайте site-vizitka-kiev.org.ua

ТОП-10

Все популярные вопросы

Checkbox React event

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

254

javascript