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

有简单的Javascript表单验证问题

1 个答案: