Question

我很难尝试进行正确的表单验证。我有姓名，电子邮件和电话号码字段。我为所有这些实现了验证检查，当我点击提交查询时，它会将电子邮件返回为false，但不会返回任何其他内容。它还将提交表格。我该如何解决这个问题？

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

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

1 个答案: