Используйте пользовательские регулярные выражения для проверки формы

Question

Я хотел бы проверить форму, используя мои собственные атрибуты данных, но не уверен, как это сделать.Я также хочу отображать сообщения об ошибках в атрибутах данных, если требуется.

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

У меня есть следующая форма ..

<form id="loginForm" name="loginForm">
                    <ul>
                        <li>
                            <label for="Username">Username:</label>
                            <input type="email" data-validation-error="Please enter a username" data-validation-use="^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$" id="username" name="username" maxlength="254" class="required" />
                        </li>
                        <li>
                            <label for="Password">Password:</label>
                            <input type="password" data-validation-error="Please enter a password" data-validation-use="^[a-zA-Z]\w{5,12}$" id="password" name="password" value="" maxlength="12" class="required" />
                        </li>
                    </ul>
                    <input type="submit" value="Login" class="button" name="loginBtn" id="loginBtn" />
            </form>

Answer 1

Если вы разрабатываете только для современных браузеров, вы можете использовать несколько приятных функций для этого:

1. Элемент списка. Используйте тип ввода email для поля имени пользователя. Браузер позаботится о проверке.
2. Использовать атрибут обязательно . Браузер не позволяет пользователю отправлять без значения в поле.
3. Использовать атрибут pattern . Браузер не позволяет пользователю отправлять без значения, соответствующего данному шаблону. Хотя, с типом электронной почты, вы можете пропустить ваши ужасные регулярные выражения, соответствующие вашим письмам:)

Проверьте атрибут шаблона: http://www.the -art-of-web.com / html / html5 форм-валидация / # section_6

* * Пример тысяча двадцать-один: * * 1 022

<input type="email" required />

Здесь вы можете проверить поддержку современных функций форм в наиболее часто используемых браузерах: http://caniuse.com/#feat=forms

Продолжается обсуждение вопроса о возможности указания и стилизации сообщений об ошибках (обрабатываются браузером). На данный момент, я не думаю, что возможно стилизовать сообщения проверки. Может быть, удобнее, если эти сообщения одинаковы на всех страницах?

Если вам требуется поддержка старых браузеров, вам нужно будет поместить обработчики событий javascript в каждое поле, извлечь регулярное выражение из атрибутов данных и сопоставить его со значением. Имейте в виду, что проверка на стороне клиента не заменяет проверку на стороне сервера, а только для удобства пользователя. Поэтому проверка HTML5 может быть достаточно хороша для тех, у кого браузеры ее поддерживают - у остальных все равно останется проверка на стороне сервера, на которую можно положиться, хотя пользовательский опыт будет не таким уж большим.

Этот пример показывает, как это можно сделать (я не очень хорошо это проверил: o):

$('form').submit(function(){
    var isValid = true;
    $(this).find(':input').each(function(){
        var regex = new RegExp($(this).attr('data-validation-use'));
        if(!regex.exec($(this).val())){
            $('.validationError').append($(this).attr('data-validation-error'));
            $(this).addClass('invalid');
            isValid = false;
        }
    });
    return isValid;
});

Answer 2

JQuery проверки будет лучше. Смотрите демонстрацию и код стандартной проверки jQuery здесь. Проверка jQuery