简单的Java表格验证存在问题

Question

我无法验证我的表格。 提交表单时，我具有onsubmit="return validateInput();" 。 如果用户不输入任何数据，则函数validateInput()可以正常工作，更改HTML并显示所需的消息。 但是我也试图调用function goodNum()和function checkCreditCard() 。

function goodNum()用于检查用户输入的电话号码是否正确，而不仅仅是随机数字。

function checkCreditCard()作用与goodNum()相同，只是用于信用卡。

问题是，只要用户以提交表格的形式在所有字段中输入任何数据。 我是javascript新手，还花了几个小时尝试解决这个问题，但仍然一无所知，我们将不胜感激。

JAVASCRIPT

`

var validation = false;

function validateInput()
    {
        var valid = new Boolean(true);

        if(validation == false)
        {
            alert("Please choose the Pizza size to order");
            valid = false;
        }

        if(document.getElementById('customer_name').value == "")
        {
            alert("You must enter your name");
            document.getElementById('customer_name').style.background='red';
            valid = false;
        }

        if( document.getElementById('email').value == "")
        {
            alert("Please enter your E-mail");
            document.getElementById('email').style.background='red';
            valid = false;
        }

        if( document.getElementById('mobile_num').value == "")
        {
            alert("Please enter your phone number");
            document.getElementById('mobile_num').style.background='red';
            valid = false;
        } 
        else if(!goodNum()){
            alert("The number you entered is incorrect");
            document.getElementById('mobile_num').style.background='red';
            valid = false;
        }
        if( document.getElementById('credit_card').value == "")
        {
            alert("Please enter your credit card number");
            document.getElementById('credit_card').style.background='red';
            valid = false;
        }
        else if(!checkCreditCard())
        {
            alert("The credit card number you entered is incorrect");
            document.getElementById('credit_card').style.background='red';
            valid = false;
        }

        if( document.getElementById('customer_address').value == "")
        {
            alert("Please enter your Address");
            document.getElementById('customer_address').style.background='red';
            valid = false;
        }


        return valid;       
    }       
//checks the phone number the user entered
function goodNum()
{
    var num;
    num = document.forms["myForm"]["mobileNum"].value;
    var valid = new Boolean(true);

        if((num==null) || (num==" "))
        {
            valid= false;
        }

        if(num.length != 10)
        {
            valid = false;
        }

    var a = num.slice(2,3);

        if (!((a=="3") || (a=="5") || (a=="6") || (a=="7")))    
        {   
            valid=false;
        }
        for(index=3;index<10;index++)
        {
            a = num.slice(index,index+1);

            if((a< "0") || (a> "9"))
                valid =false;
        }

    var count = 0;
        for (n=0;n<9;n++)
        {
            a = num.slice(n,n+1);
            if((c == "0") || (c == "2") || (c == "4") || (c == "6") || (c == "8"))
                count = count+1;
        }

    var b = parseInt(mobilenum.slice(9,10), 10); 
        if (!(b == count))
        {
             valid=false; 
        }

    if(!valid)
    {
        alert("Re-enter your number.");
    }

    return valid;
}

//checking to make sure the user entered a correct credit card number 
//using the luhn formula
function checkCreditCard()
{

    var valid = new Boolean(true);
    var cardNum;
    cardNum = document.forms["myForm"]["creditCard"].value;
    var cNum = 0, checkNumber=0;
    if (cardNum.length != 16)
    { 
        valid=false;
    }
    for(var x = cardNum.length - 1; x >= 0; x--)
    {
        checkNumber = cardNum.charAt(x);
        checkNumber = parseInt(checkNumber, 10);

        if((x%2) == 0)
        {
            checkNumber = checkNumber*2;
                if(checkNumber > 9)
                {
                    checkNumber = checkNumber -9;
                }
        }
        cNum += checkNumber;

    }

    if(!(cNum%10)==0)
    {
        valid = false;
    }


    return valid;

}  

的HTML

    <form name="myForm" onsubmit="return validateInput();" id="customer_details"  method="get" action="http://atlantis.cit.ie/displayvalues.php">
<fieldset>
<legend>Choose Your Pizza: </legend>
<table>

    <tr>
        <td colspan="3">
        <img src="base.png" id="base" width="150" height="150" alt="base" />
        <img src="anchovies.png" id="anchovies" width="150" height="150" alt="anchovies" />
        <img src="cheese.png" id="cheese" width="150" height="150" alt="cheese" />
        <img src="onions.png" id="onions" width="150" height="150" alt="Pizza" />
        <img src="p4.png" id="pizh" width="150" height="150" alt="Pizza" />
        <img src="pepperoni.png" id="pepperoni"width="150" height="150" alt="Pepperoni" />
        <img src="olives.png" id="olives" width="150" height="150" alt="olives" />  
        </td>

    </tr>
    <tr>
        <td><input type="radio" id="radio1" onclick="resize();validation=true;" name="pbase" value="small" /> Small</td>
        <td><input type="radio" id="radio2" onclick="resize();validation=true;" name="pbase" value="medium" /> Medium</td>
        <td><input type="radio" id="radio3" onclick="resize();validation=true;" name="pbase" value="large" /> Large</td>
    </tr>
    <tr>
       <td colspan="2">Anchovies</td>
       <td><input type="checkbox" id="Anchovies" name="anch" onclick="doVisible()"  value="0.50" /></td>
    </tr>
    <tr>
       <td colspan="2">Cheese</td>
       <td><input type="checkbox" id="Cheese" name="ch" onclick="doVisible()"  value="0.50" /></td>
    </tr>
    <tr>
       <td colspan="2">Onions</td>
       <td><input type="checkbox" id="Onions" name="oni" onclick="doVisible()"  value="0.50" /></td>
    </tr>
    <tr>
       <td colspan="2">Pepper</td>
       <td><input type="checkbox" id="pepper" name="pe" onclick="doVisible()"  value="0.50" /></td>
    </tr>
    <tr>
       <td colspan="2">Pepperoni</td>
       <td><input type="checkbox" id="Pepperoni" name="pep" onclick="doVisible()" value="0.50" /></td>
    </tr>
    <tr>
       <td colspan="2">Olives</td>
       <td><input type="checkbox" id="Olive" name="ol" onclick="doVisible()"  value="0.50" /></td> 
    </tr>   
    <tr>
       <td colspan="2">Name:*</td>
       <td><input type="text" id="customer_name" name="customerName" size="35" placeholder="John Doe" /></td>
    </tr>
    <tr>
       <td colspan="2">Email Address:*</td>
       <td><input type="text" id="email" name="emailAdd" size="35" placeholder="example@mycit.ie"/></td>
    </tr>
    <tr>
       <td colspan="2"> Phone Number:*</td>
       <td><input type="text" id="mobile_num" name="mobileNum" size="35" placeholder="0851111111" /></td>
    </tr>
    <tr>
        <td colspan="2">Credit Card Number:*</td>
        <td><input type="text" id="credit_card" name="creditCard" size="35" /></td>
    </tr>
    <tr>
       <td colspan="2">Address:*</td>
       <td><textarea id="customer_address"  name="address" rows="5" cols="27"></textarea></td>
    </tr>
    <tr>
       <td colspan="3"><input value="Order Now" onclick="" type="submit" /><input value="Reset Order" onclick="" type="Reset" /></td>
    </tr>
</table>
</fieldset>
</form>

`

（这不是全部代码，我还有其他功能可以正常工作，所以我认为它们不会引起问题，对不起这么多代码）

Answer 1

以下代码中有两个问题：

var count = 0;
    for (n=0;n<9;n++)
    {
        a = num.slice(n,n+1);
        if((c == "0") || (c == "2") || (c == "4") || (c == "6") || (c == "8"))
            count = count+1;
    }

var b = parseInt(mobilenum.slice(9,10), 10);  

• a应该是c
• mobilenum未定义

更正了这两个问题后，将显示消息“重新输入您的电话号码”。

我也有一个建议。 由于您是初学者，并且此代码可能对您从事的业务至关重要，因此您应该考虑使用验证库。 您可以在以下位置找到评论： https ： //www.codefellows.org/blog/the-ten-best-javascript-libraries-for-form-validation-and-formatting