Question

我是HTML和javascript的新手，所以我提前感谢您的任何帮助。我想要做的是为表单添加验证。我在信用卡到期日期验证方面遇到了麻烦。我希望如果日期早于今天的日期，那么它应该触发“您的卡已过期。请选择有效的到期日期”。目前，它将允许您提交过期日期。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Assignment 8</title>
    <meta http-equiv="Content-Language" content="en-us"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <style type="text/css">
        table, th, td {
        border: 1px solid black;
        border-collapse: collapse;
    }
    </style>
    <script type="text/javascript">
        function validate()
            {
            if( document.billing.cardnumber.value == "" ||
                isNaN( document.billing.cardnumber.value ) ||
                document.billing.cardnumber.value.length != 9 ){
                        alert( "Please provide a card number in the format #########." );
                    document.billing.cardnumber.focus() ;
                    return false;
                }
            if( document.billing.cardtype.value == "none" )
                {
                        alert( "Please select a credit card type" );
                document.billing.cardtype.focus() ;
                        return false;
                }
                return( true );

            var today, someday;
            var expirationmonth=document.getElementByName("expirationmonth");
            var expirationyear=document.getElementByName("expirationyear");
            today = new Date();
            someday = new Date();
            someday.setFullYear(expirationyear, expirationmonth, 1);

            if (someday < today) {
                alert("Your card is expired. Please select a valid expiration date");
                return false;
            }
        }


    </script>
</head>
<body>
    <form action="/~ka14804/assignment4/assignment4.php" name="billing" onsubmit="return(validate());" method="post"  >
        <fieldset>
            <legend>Billing:</legend>
            <input type="radio" name="billtype" value="Credit Card" checked="checked"/>Credit Card
            <input type="radio" name="billtype" value="Bill Customer"/>Bill Customer
        </fieldset>
        <br></br>
        <label>Credit Card Type:</label>
        <select name="cardtype">
                        <option value="none" selected>[choose yours]</option>
                        <option value="Visa">Visa</option>
                        <option value="Mastercard">Mastercard</option>
                        <option value="American Express">American Express</option>
                </select>
        <br></br>
        Card Number:
        <input type="text" name="cardnumber"/>
        <br></br>
        <label>Expiration Date:</label>
            <select name="expirationmonth">
            <option value="January">January</option>
            <option value="February">February</option>
            <option value="March">March</option>
            <option value="April">April</option>
            <option value="May">May</option>
            <option value="June">June</option>
            <option value="July">July</option>
            <option value="August" selected="selected">August</option>
            <option value="September">September</option>
            <option value="October">October</option>
            <option value="November">November</option>
            <option value="December">December</option>
        </select>
        <select name="expirationyear">
            <option value="2015" selected="selected">2015</option>
            <option value="2016">2016</option>
            <option value="2017">2017</option>
            <option value="2018">2018</option>
            <option value="2019">2019</option>
            <option value="2020">2020</option>
            <option value="2021">2021</option>
            <option value="2022">2022</option>
            <option value="2023">2023</option>
            <option value="2024">2024</option>
        </select>
        <br></br>
        <input type="checkbox" name="billingDefault" value="Set as default billing method" checked="checked"/>Set as default billing method
        <br></br>
        <input type="submit" value="Submit"/>
        <input type="reset" value="Reset"/>
    </form> 
    <p>
        <a href="http://validator.w3.org/check?uri=referer">
        <img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional" height="31" width="88" />
        </a>
    </p>
</body>

Answer 1

你必须得到元素的值，你不能直接传入元素：

var expirationmonth=document.getElementByName("expirationmonth");
var expirationyear=document.getElementByName("expirationyear");
today = new Date();
someday = new Date();
someday.setFullYear(expirationyear.value, expirationmonth.value, 1);

此外，该代码永远不会被调用，因为正好在它上面：

if( document.billing.cardtype.value == "none" )
{
      //other stuff
      return false;
}
return( true );

那部分将永远返回，这意味着它下面的任何东西永远不会发生

Javascript信用卡到期验证

1 个答案: