Как проверить контактную форму с помощью JavaScript?

Question

Я создал контактную форму:

<form action="mailto:myemail@me.com" method="post" enctype="plain/text">
  <label for="name">Name:</label>&nbsp;<input type="text" name="name" />
  <label for="email">Email:</label>&nbsp;<input type="text" name="email" />
  <br clear="all" />
  <input type="submit" value="Compose" />
</form>

Я хочу создать средство проверки формы javascript, не используя серверный язык, такой как PHP.Есть идеи?

Answer 1

Это плохая идея . Проверка JavaScript и JavaScript может быть обойдена несколькими способами.

1. Пользователь может указать браузеру не выполнять никакой JavaScript-код на странице. Если форма сама по себе не использует JavaScript, она все равно будет отображаться, и страница действий все еще будет там, но вся ваша проверка пропала.
2. DOM может редактироваться пользователем. Инструменты разработчика веб-страниц, такие как Chrome, Firefox и IE, позволяют легко изменять атрибуты формы. Это включает в себя удаление атрибутов, таких как onsubmit из формы. Или пользователь может просто удалить функцию JavaScript из ресурсов, используемых веб-страницей полностью. Это позволяет пользователю избежать проверки.
3. Пользователь может отправлять данные POST или GET непосредственно на URL-адрес действия, не заходя на вашу страницу. Это отлично подходит для злоумышленников, поскольку они могут внедрить некорректную форму на ваш сервер, даже не заходя в браузер - вместо этого они могут использовать терминал, что гораздо удобнее.

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

Если вы ищете библиотеку для проверки форм PHP, вы можете найти их в Интернете. Например, я лично предоставил одну такую ​​библиотеку , которая хорошо справляется с оценкой полей в форме типа POST или GET. Я прошу прощения за саморекламу, я должен настаивать на том, чтобы вы выполняли проверку на стороне сервера в целях безопасности.

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

Answer 2

Посмотрите на этот живой пример .

$('#form1').submit(function() {
    // Store messages
    var msgs = [];

    // Validate name, need at least 4 characters...
    var name = $('[name=name]', this);
    if(name.val().length < 4) {
        msgs.push('- Name need at least 04 characters;');
    }

    // Validate email [...]
    // {CODE}

    // Validate otherthings [...]
    // {CODE}

    if(msgs.length !== 0) {
        alert("We have some problems:\n\n" + msgs.join("\n"));
        return false;
    }
});​

Answer 3

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

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

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

вот один: http://docs.jquery.com/Plugins/Validation#Example

, если вы не любите использоватьjQuery, вы всегда можете указать onBlur=myFunction() для выполнения любой логики, которая вам нужна, когда поле ввода теряет фокус.