Спонсор: Microsoft
Воронежский государственный университет
Опубликован: 04.02.2009 | Доступ: свободный | Студентов: 7550 / 459 | Оценка: 4.14 / 3.78 | Длительность: 19:54:00
Самостоятельная работа 4:

Клиентские сценарии. Использование регулярных выражений

< Самостоятельная работа 3 || Самостоятельная работа 4: 123 || Лекция 4 >

Использование регулярных выражений в JavaScript

При поиске по тексту можно использовать шаблон, описывающий подстроку. В JavaScript такой шаблон может быть описан с помощью объекта RegExp. В простейшем случае такой шаблон описывает отдельный символ, однако имеет смысл его использовать для регулярных выражений.

Следующий ниже код описывает RegExp объект с именем pttn, содержащий регулярное выражение, описывающее целое десятичное число:

var pattn = new RegExp("/[0-9]+/");

Объект RegExp имеет 3 встроенных метода: test(), exec() и compile().

  • Метод test() выполняет поиск по шаблону:
    var pattn = new RegExp("[0-9]+");
    document.write(pattn.test("38 попугаев"));

    Результат:

    true
  • Метод exec() выполняет поиск подстроки по шаблону и возвращает найденные соответствия; если соответствий нет, возвращается значение null:
    var pattn=new RegExp("[0-9]+");
    document.write(pattn.exec("38 попугаев"));

    Результат:

    38

    Если необходимо найти все соответствия, то при вызове конструктора RegExp следует указать дополнительный параметр "g", указывающий на необходимость глобального поиска:

    var pattn = new RegExp("[0-9]+", "g");
    do
    {
    result  = pattn.exec("1 попугай, 2 попугая,…, 38 попугаев");
    document.write(" " + result);
    }
    while (result != null)
    Пример 7.2.

    Результат:

    1 2 38 null
  • Метод compile() применяется для изменения ранее созданного шаблона:
    var pattn = new RegExp("[0-5]+");
    document.write(pattn.exec("38 попугаев"));
    pattn.compile("[6-9]+");
    document.write(";" + pattn.exec("38 попугаев"));
    Пример 7.3.

    Результат:

    3;8

Порядок выполнения работы

Проверка значений, введенных пользователем в поля формы для регистрации.

  • Для выполнения лабораторной работы необходимо создать веб-страницу, содержащую форму с полями, следующего вида:

  • В тэге <form> добавьте обработчик события отправки данных вида:
    onSubmit = "CheckData(); return false;"
    В данном случае указана функция обработчик CheckData(). Оператор return false; предотвращает автоматическую отправку данных после выполнения функции-обработчика. Отправка данных будет выполняться из обработчика.
  • Добавьте на странице секцию JavaScript кода, описывающего функцию-обработчик:
    function CheckData()
    {
      var ans;
      ans = confirm("Вы уверены, что хотите отправить введенные данные ?");
      if (ans) submit();
    }
    Как это видно из кода, функция CheckData() в случае подтверждения со стороны пользователя самостоятельно вызывает метод submit() для передачи данных из формы.
  • Теперь необходимо добавить проверку значений, введенных в поля формы пользователем.

    Прежде всего, необходимо убедиться в том, что заполнены все поля, обязательные для ввода. Для этого можно использовать проверку на равенство нулю длины строки (свойство length ), являющейся значением узла дерева документа, соответствующего полю ввода, например:

    document.getElementById("uname").value.length.

    Следующая проверка должна контролировать структуру и содержимое полей. Для этого можно использовать объект RegExp, например:

    var validEMail, pattn;
    
    pattn = new RegExp("^[\.\-_A-Za-z0-9]+?@[\.\-A-Za-z0-9]+?\.[A-Za-z0-9]{2,6}$");
      
    validEMail = pattn.test(document.getElementById("email").value));

    В данном фрагменте описана проверка структуры электронного адреса из поля формы с идентификатором "email". Для проверки был использован шаблон на основе регулярного выражения.

Контрольное задание

Самостоятельно постройте регулярное выражение, описывающее шаблон для проверки номера телефона, и внесите все необходимые изменения и дополнения в функцию CheckData().

< Самостоятельная работа 3 || Самостоятельная работа 4: 123 || Лекция 4 >
Михаил Олифиренко
Михаил Олифиренко
Александр Табачук
Александр Табачук

Это только у меня не работает кнопочка "Получить код DreamSpark"? Пишет "временно не доступно..." А когда заработает?

Юрий Тарасов
Юрий Тарасов
Россия, Мегион
Марина Дайнеко
Марина Дайнеко
Россия, Moscow, Nope, 2008