Кастомизация
26
Янв
0

Строгая проверка ввода данных online

Ниже Вы можете лицезреть скриптик для проверки правильности введенных в поле данных в режиме реального времени (т.е. при каждом нажатии клавиши). Это удобно если необходимо вводить данные в определенном формате, поскольку сохраняет кучу времени, которое пользователь может затратить на исправление ошибок. А в данном случаи при каждом нажатии проводится проверка и если она не пройдена, то ввод символа отменяется.

Сделаем проверку такого формата номера телефона:

+7 (900) 123-45-56

Т.е. первый символ «+», второй цифра, третий «пробел», четвертый открывающая скобка, затем снова цифра и т.д.

Для этих целей мы прикрепляем к полю событие OnKeyPress, при котором вызывается функция проверки правильности данных. И если данные не корректны просто отменяем ввод.

Вешайте на онлоад (в данном примере, формы Контакта):

ValidateCharacters = function() {

    // подчитываем количество символов
    var c = getCaretPosition(document.getElementById('telephone1')) +1;

    //  получаем код наджатой клавиши
    var key = event.keyCode;

	// отменяем ввод данных если в определенном месте пользователь пытается ввести не разрешенный символ   
    if (c==1 && key != 43) {
    	// +
        event.returnValue = false; 
        return false; 
    } else if ((c==2 || (c >= 5 && c <= 7) || (c >= 10 && c <= 12) || c==14 || c==15 || c==17 || c==18) && !(key >= 48 && key <= 57)) {
		// 0-9
        event.returnValue = false; 
        return false; 
    } else if ((c==3 || c==9) && key != 32) {
        // пробел
        event.returnValue = false; 
        return false;
    } else if (c==4 && key != 40) {
        // (
        event.returnValue = false; 
        return false; 
    } else if (c==8 && key != 41) {
        // )
        event.returnValue = false; 
        return false; 
    } else if ((c==13 || c==16) && key != 45) {
        // -
        event.returnValue = false; 
        return false; 
    } else if (c > 18) {
        // запрещаем ввод более 18 символов
        event.returnValue = false; 
        return false; 
    }

    // если курсор установлен не в конце строки, выделяем символ справа от него
    if ((c - 1) != document.getElementById("telephone1").value.length) {
        selectChar();
    }

}

// Функция выделяет один символ в строке, справа от курсора
function selectChar() {  

    var s = getCaretPosition(document.getElementById('telephone1'));
    var e = s - document.getElementById("telephone1").value.length + 1;
    t = document.getElementById('telephone1').createTextRange();
    t.moveStart('character', s);
    t.moveEnd('character', e);
    t.select(); 

}  

// Функция определяет позицию курсора в поле
function getCaretPosition (ctrl) {
 
	var CaretPos = 0;
	if (document.selection) {
		ctrl.focus ();
		var Sel = document.selection.createRange ();
		Sel.moveStart ('character', -ctrl.value.length);
		CaretPos = Sel.text.length;
	}
	return (CaretPos);
    
}

// Привязываем к полю событие нажатия клавиши
document.getElementById('telephone1').onkeypress = ValidateCharacters;

А чтобы пользователь не смог ввести что-нибудь в середине текста, при попытке набрать текст не с конца строки — выделяется один символ справа от курсора. Тем самым сделана замещение одного символа.


Кое-какие коды символов Вы сможете найти в статье Кастомные «Горячие клавиши» в CRM 4.0. Также Вашим пользователям будет удобно, если при нажатии некорректной клавиши Вы будете показывать им правильный формат.

Комментарии (0)

*

code