Проверка с помощью JavaScript

Question

У меня есть текстовое поле, которое я использую для ввода URL. Мне бы хотелось, чтобы при нажатии на кнопку «Отправить» текстовое поле было подтверждено.

Я хочу, чтобы значение, введенное в текстовом поле, было действительным URL-адресом, включающим http://www. часть

Я хочу, чтобы это был действительный URL. Код формы:

<form  action="next.php" method="get">
    <input  id="home_page_input" type="text" name="page" value="http://"onfocus="this.value = ( this.value == this.defaultValue ) ? '' : this.value;return true;">
    <input id="url_input_button" type="submit" value="enter it !" />
  </form>

На самом деле, эта форма отправляется в php-файл, который использует Curl / file_get_contents. так что я просто хочу, чтобы в формате, который curl не отображал никаких ошибок

Answer 1

Плагин проверки jQuery поддерживает проверку URL.Смотрите пример на http://docs.jquery.com/Plugins/validation

Answer 2

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

<form onsubmit="return checkForm();" action="next.php" method="get">
    <input  id="home_page_input" type="text" name="page" value="http://" >
    <input id="url_input_button" type="submit" value="enter it !" />
</form>

И где-нибудь в Javscript:

// onSubmit - if it returns false, it won't submit, and vice versa
function checkForm () {

    var url_input_button = document.getElementById('url_input_button');
    var ok = /^[a-z]+:\/\//i.test(url_input_button.value);
    if (!ok) {
        alert('url is not correctly formed');
        return false;
    }

    // url is fine, continue
    return true;

}

Есливы не знаете, где разместить код JavaScript, вы также можете разместить его рядом с HTML, например:

<script type="text/javascript">
// onSubmit - if it returns false, it won't submit, and vice versa
function checkForm () {

    var url_input_button = document.getElementById('url_input_button');
    var ok = /^[a-z]+:\/\//i.test(url_input_button.value);
    if (!ok) {
        alert('url is not correctly formed');
        return false;
    }

    // url is fine, continue
    return true;

}
</script>

<form onsubmit="return checkForm();" action="next.php" method="get">
    <input  id="home_page_input" type="text" name="page" value="http://" >
    <input id="url_input_button" type="submit" value="enter it !" />
</form>

edit: Я так долго делал jquery,что мои навыки ванильного JavaScript ухудшились.Не знаю, как назначить событие, не прибегая к встроенному JavaScript. Я отредактировал пример

Несколько связанный вопрос по переполнению стека: как я могу проверить URL в JavaScript с помощью регулярного выражения

Answer 3

Через регулярное выражение

URL-адреса - довольно сложные правила.Вот что из библиотеки regexp в любом случае:

^ http \: // [a-zA-Z0-9-.] +. [A-zA-Z] {2,3} (/ \ S *)? $

Через Ajax

Другим способом будет использование AJAX (через Jquery), который отправляет запросна введенный URL и возвращает, если это 404 или нет.Однако самый большой недостаток заключается в том, что сервер отключается примерно на час.

Для рассмотрения

Имеет ли это значение?Многие из этих проверок на самом деле вызывают больше проблем, чем улучшений.Взять, к примеру, подтверждение по электронной почте.