Небольшая помощь, пожалуйста, со скриптом проверки контактной формы

У меня есть этот скрипт проверки формы электронной почты:

    <script type="text/javascript" language="javascript">  
function validateForm(thisform){  
 if(thisform.Name.value=="") {  
   alert("Ooouuupppsss... You did not enter your Name.");  
   thisform.Name.focus();  
   return false;  
 }  
 if(thisform.Email.value=="") {  
   alert("Ooouuupppsss... You did not enter a valid Email Address.");  
   thisform.Email.focus();  
   return false;  
 }  
 if(thisform.Subject.value=="") {  
   alert("Ooouuupppsss... You did not enter your Subject.");  
   thisform.Subject.focus();  
   return false;  
 }  
 if(thisform.Message.value=="") {  
   alert("Ooouuupppsss... You did not enter your Message.");  
   thisform.Message.focus();  
   return false;  
 }  
}</script>  

Может кто-нибудь, пожалуйста, скажите мне, что мне нужно добавить в этот сценарий, чтобы пользователи вводили действительный адрес электронной почты. Также хотелось бы, чтобы в остальные поля пользователи вводили текст (не ссылки).

Я пытался добавить различные фрагменты кода, которые я нашел на разных веб-сайтах, но они не работали, потому что я не уверен, что добавляю их правильно.

Спасибо, что прочитали мой запрос.

Всего наилучшего, Энди


person Mosila Andrei Alexandru    schedule 22.08.2013    source источник


Ответы (2)


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

function validateForm(){
    var email = document.getElementById("email").value;
    var emailRegEx = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i;
    if (email.search(emailRegEx) == -1) {
        alert("e-mail is not valid");
        return false;
    }
}

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

var urlRegEx = /((([A-Za-z]{3,9}:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)/;

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

    function validateForm(thisform){  
        if(thisform.Name.value=="") {  
            alert("Ooouuupppsss... You did not enter your Name.");  
            thisform.Name.focus();  
            return false;  
        }  
        else{
            var name = thisform.Name.value;
            if (!checkURL(name)) {
                alert("name cannot be a url");
                return false;
            }
        }
        if(thisform.Email.value=="") {  
           alert("Ooouuupppsss... You did not enter a valid Email Address.");  
           thisform.Email.focus();  
           return false;  
        }  
         else{
            var email = thisform.Email.value;
            var emailRegEx = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i;
            if (email.search(emailRegEx) == -1) {
                alert("e-mail is not valid");
                return false;
            }
        }
         if(thisform.Subject.value=="") {  
           alert("Ooouuupppsss... You did not enter your Subject.");  
           thisform.Subject.focus();  
           return false;  
        }
            else{
                if (!checkURL(thisform.Subject.value)) {
                    alert("subject cannot contain a url");
                    return false;
                }
            }
         if(thisform.Message.value=="") {  
           alert("Ooouuupppsss... You did not enter your Message.");  
           thisform.Message.focus();  
           return false;  
        }  
        else{
            if (!checkURL(thisform.Message.value)) {
                alert("message cannot contain a url");
                return false;
            }
        }
    }
    function checkURL(url){
        var urlRegEx = /((([A-Za-z]{3,9}:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)/;
        if (url.search(urlRegEx) == -1) {
            return true;
        }
        return false;
    }
person Murat Güvenç    schedule 22.08.2013
comment
Большое спасибо за ваш ответ. На мой взгляд, ваш ответ кажется хорошим вариантом. К сожалению, я новичок в этой области и не могу понять, как включить ваш код в свой, я пробовал несколько раз, но получаю только ошибки. Я почти уверен, что есть что-то, что я делаю не так. Я добавил часть else после части, если электронная почта пуста, проверила на w3school.com, как это сделать, и она все еще не работает :( Если у вас есть свободное время, не могли бы вы помочь мне, пожалуйста? Еще раз большое вам спасибо! - person Mosila Andrei Alexandru; 23.08.2013
comment
Я добавил рабочий пример, если это не сработает, вы также должны опубликовать свой html - person Murat Güvenç; 25.08.2013
comment
Хорошо, я добавил код, который вы мне дали, и, к сожалению, он не работает. Возможно ли это из-за файла .php, который перенаправляет информацию из контактной формы на мою электронную почту? файл .php также содержит небольшой JavaScript, который создает небольшое окно с сообщением благодарности после отправки формы. Я почти уверен, что код HTML правильный, потому что все работает нормально, пока я не добавлю другие команды в JavaScript, который я вставил в свой первый пост. Еще раз спасибо :) и мне очень жаль, что я снова беспокою вас со своей проблемой. - person Mosila Andrei Alexandru; 25.08.2013
comment
Если часть html в порядке, попробуйте отладить свой код с помощью предупреждений. Может быть, вы найдете сломанную часть. - person Murat Güvenç; 26.08.2013

См. этот пост для URL-адресов регулярных выражений: регулярное выражение для URL-адреса

См. этот пост для проверки электронной почты: Подтвердить адрес электронной почты в JavaScript?

Посмотрите это для прослушивания событий браузера X, если бы вы использовали jQuery, ie8 использует присоединение, см. это: Реализация кросс-браузерной функции добавления событий в Javascript: использование attachEvent/addEventListener вместо встроенных событий

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

(function(){ 
var validateForm = function(form){
    var errors = [], inputs = form.getElementsByTagName('input');
    for(var input = 0; input<inputs.length; input++){
        var currentInput = inputs[input];
        if(currentInput.value === ''){
            // handle attributes here for error message, push error message
            if(currentInput.attribute('name') === 'email'){
                // handle email
                // push error message
            }
        }
    }
    return errors; 
}

var contactForm = document.getElementById('contact');
contactForm.addEventListener('submit', function(e){ 
    var errorMessages = validateForm(contactForm);
    if(errorMessages.length === 0){

    } else {
        e.preventDefault() // stop the form from submitting
        // handle your messages 
    }
}
}());
person Michael Benin    schedule 22.08.2013