Проверка наличия в вводимой строке определенных символов
Может возникнуть необходимость проверки того, содержатся ли в вводимой строке те или иные символы. Представим, например, что предполагается, что вводимая информация представляет собой номер телефона. Это значит, что в строке должны содержаться только цифры (мы предполагаем, что номера телефонов содержат в себе лишь цифры).
Иногда же необходимо, чтобы вводимая информация содержала лишь ограниченный определенный набор символов. В примере с номером телефона мы будем проверять, являются ли вводимые символы цифрами.
Однако некоторые люди при вводе номеров телефонов используют и другие символы, помимо цифр, и номер телефона может выглядеть, например, так: 012-345-6789, или (012)345-6789, или 012/345-67-89, или 012 3456789 (в середине есть пробел).
Чтобы не заставлять пользователя изменять привычную для него запись телефонного номера, мы должны позаботиться о том, чтобы помимо цифр в номер телефона можно было включать и некоторые дополнительные символы.
Задание:
Написать скрипт, осуществляющий проверку ввода телефонного номера на наличие недопустимых символов.
Выполнение:
1) создать новый HTML-документ;
2) поместить в тело документа форму с именем first, содержащую поле для ввода телефонного номера с именем text1 (перед этим полем должна находиться надпись, например Телефон: );
3) добавить в форму кнопку, с надписью Проверка;
4) создать Java-скрипт содержащий следующие функции:
function check(input) {
var digits="1234567890/- ";
var ok = true;
//alert(input);
for (var i = 0; i < input.length; i++) {
var chr = input.charAt(i) ;
var found = false;
for (var j = 0; j < digits.length; j++ ) {
var digit = digits.charAt(j)
if (chr == digit) found = true;
}
if (!found) ok = false;
}
return ok;
}
function test(input) {
if (!check(input)) {
alert("В вводимой информации содержатся ошибки");
}
else {
alert("Ввод принят.");
}
}
3) сохранить html-документ;
4) проверить работу скрипта, открыв созданный HTML-документ в браузере.
Пояснение:
На рисунке показанном ниже приведен пример успешного выполнения проверки вводимых данных.
Рисунок 14 – Результат выполнения скрипта.
Как обратить внимание пользователя на тот или иной элемент формы
При помощи метода focus() мы имеем возможность сделать нашу форму более удобной для пользователя. Мы сможем подсказать пользователю, на какую форму следует обратить внимание первым делом. Или же мы сможем подсказать пользователю и обратить его внимание на тот элемент, в котором был введен неправильный текст или допущена ошибка.
Это осуществляется при помощи того, что браузер устанавливает курсор в тот элемент, на который мы указываем посредством программы, использующей метод focus(). Метод focus() как бы фокусирует внимание пользователя на определенном элементе формы, на котором устанавливается курсор.
Задание:
Изменить HTML-документ, созданный в предыдущем задании, таким образом, чтобы после загрузки документа курсор автоматически устанавливался на поле для ввода.
Для этого необходимо написать скрипт, осуществляющий проверку ввода телефонного номера на наличие недопустимых символов.
Выполнение:
1) добавить в ранее созданный HTML-документ следующую функцию:
function setfocus( )
{
document.first.text1.focus( ) ;
}
2) изменить тег <body>, добавив в него вызов функции setfocus(), следующим образом: onLoad="setfocus()";
3) сохранить HTML-документ;
4) проверить работу скрипта, открыв созданный HTML-документ в браузере.
Пояснение:
При помощи вызова функции setfocus() мы устанавливаем курсор в первом элементе выше написанного скрипта на JavaScript. Нам необходимо указать имя всей формы, которое в нашем случае представляет собой first, а затем указать имя текстового элемента данной формы — text1.
Для того чтобы курсор устанавливался в текстовом элементе этой формы сразу после загрузки страницы, мы используем свойство onLoad внутри действия тега <body>.
Мы можем слегка усложнить нашу функцию setfocus() следующим образом:
function setfocus() {
document.first.text1.focus();
document.first.text1.select();}
Рисунок 15 – Результат выполнения скрипта.
Попробуйте данную программу в работе. Вы увидите, что курсор устанавливается в текстовом элементе формы и осуществляется выделение содержащихся в текстовом поле данных.