如何在 JavaScript 中正确执行表单验证？

Question

我很难尝试进行正确的表单验证。我有姓名、电子邮件和电话号码字段。我对所有这些都实施了验证检查，当我单击提交查询时，它返回电子邮件为假，但没有其他任何东西。它也仍将提交表单。我该如何解决这个问题？

JSFiddle：http://jsfiddle.net/GVQpL/

JavaScript 代码：

function validateForm(/*fullName, email, phoneNumber*/)
{
    //-------------------------NAME VALIDATION-----------------------------//
    var fullNameV = document.forms["queryForm"]["fullName"].value;
    if (fullNameV == null || fullNameV == "")
    {
        alert("Name must be filled out!");
        return false;
    }
    else if(fullNameV.indexOf(" ") <= fullNameV.length)
    {
        alert("Not a valid name");
        return false;
    }

    //-------------------------EMAIL VALIDATION-----------------------------//
    var emailV = document.forms["queryForm"]["email"].value;
    if (emailV == null || emailV == "")
    {
         alert("Email must be filled out!");
         return false;
    }
    var atpos = emailV.indexOf("@");
    var dotpos = emailV.lastIndexOf(".");
    if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= x.length)
    {
        alert("Not a valid e-mail address");
        return false;
    }

    //-------------------------PHONE # VALIDATION-----------------------------//
    var phoneNumberV = document.forms["queryForm"]["phoneNumber"].value;
    if (phoneNumberV == null || phoneNumberV == "")
    {
        alert("Phone Number must be filled out!");
        return false;
    }
    var error = "";
    var stripped = phoneNumberV.replace(/[\(\)\.\-\ ]/g, '');    

    if (phoneNumberV == "") 
    {
        error = alert("You didn't enter a phone number.\n");
        phoneNumberV.style.background = 'Yellow';
    } 
    else if (isNaN(parseInt(stripped))) 
    {
        error = alert("The phone number contains illegal characters.\n");
        phoneNumberV.style.background = 'Yellow';
    } 
    else if (!(stripped.length == 10)) 
    {
        error = alert("The phone number is the wrong length. Make sure you included an area code.\n");
        phoneNumberV.style.background = 'Yellow';
    }
    return error;
}

Answer 1

更新你的小提琴的 html 来调用 onsubmit="return validateForm()" 并删除 required="required" 改变你的函数来工作，你可以在这里看到它：

http://jsfiddle.net/GVQpL/3/

        function validateForm(/*fullName, email, phoneNumber*/)
        {
            //-------------------------NAME VALIDATION-----------------------------//
            var fullNameV = document.forms["queryForm"]["fullName"].value;
            if (fullNameV == null || fullNameV == "")
            {
                alert("Name must be filled out!");
                document.forms["queryForm"]["fullName"].focus();
                return false;
            }
            else if(fullNameV.indexOf(" ") >= fullNameV.length)
            {
                alert("Not a valid name");
                document.forms["queryForm"]["fullName"].focus();
                return false;
            }

            //-------------------------EMAIL VALIDATION-----------------------------//
            var emailV = document.forms["queryForm"]["email"].value;
            if (emailV == null || emailV == "")
            {
                alert("Email must be filled out!");
                document.forms["queryForm"]["email"].focus();
                return false;
            }

            var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
if(!emailReg.test(emailV)){

                alert("Not a valid e-mail address");
                document.forms["queryForm"]["email"].focus();
                return false;
            }

            //-------------------------PHONE # VALIDATION-----------------------------//
            var phoneNumberV = document.forms["queryForm"]["phoneNumber"].value;
            if (phoneNumberV == null || phoneNumberV == "")
            {
                alert("Phone Number must be filled out!");
                document.forms["queryForm"]["phoneNumber"].focus();
                return false;
            }
            var error = "";
            var stripped = phoneNumberV.replace(/[\(\)\.\-\ ]/g, '');    

            if (phoneNumberV == "") 
            {
                alert("You didn't enter a phone number.\n");
                document.forms["queryForm"]["phoneNumber"].focus()
                document.forms["queryForm"]["phoneNumber"].style.background = 'Yellow';
                return false;
            } 
            else if (isNaN(parseInt(stripped))) 
            {
             alert("The phone number contains illegal characters.\n");
                document.forms["queryForm"]["phoneNumber"].focus();
                document.forms["queryForm"]["phoneNumber"].style.background = 'Yellow';
                return false;
            } 
            else if (!(stripped.length == 10)) 
            {
                alert("The phone number is the wrong length. Make sure you included an area code.\n");
                document.forms["queryForm"]["phoneNumber"].focus();
                document.forms["queryForm"]["phoneNumber"].style.background = 'Yellow';
                return false;
            }
            if(!confirm('Are you sure you want to submit your DSLR query?')){
                return false;   
            }
            return true;
        }