请通过联系表单验证器脚本获得一些帮助

时间:2013-08-22 16:44:51

标签: javascript validation contact-form

我有这个电子邮件表单验证脚本:

    <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>  

有人可以告诉我,我必须在此脚本中添加什么才能让用户输入有效的电子邮件地址。此外,我希望在其他字段中让用户输入文本(而不是链接)。

我尝试添加我在不同网站上找到的不同代码但它们不起作用,这是因为我不确定我是否正确添加它们。

感谢您阅读我的请求。

一切顺利, 岸堤

2 个答案:

答案 0 :(得分:0)

请参阅此帖子,了解正则表达式网址:regular expression for url

请参阅此帖子以了解电子邮件验证:Validate email address in JavaScript?

对于X浏览器事件监听看到这个,如果使用jQuery,ie8使用attach请看:Javascript add events cross-browser function implementation: use attachEvent/addEventListener vs inline events

我建议循环遍历表单输入,并检查它的电子邮件是否不运行正则表达式链接。

(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 
    }
}
}());

答案 1 :(得分:0)

对于电子邮件检查,您可以在检查电子邮件是否为空后在else部分使用以下代码

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;
    }
相关问题