Question

所以基本上，我正在为练习网站创建一个预订表格。我想验证日期，以便用户只能在2017年输入日期，如果没有在2017年输入日期就无法继续。如果没有输入有效的姓名和电子邮件，他们也无法继续。如果其中一个不满足，则会显示警告消息，并突出显示相关文本框。

以下是我目前在代码方面的内容：

感谢任何帮助，谢谢。

HTML

<html>

<head>
    <title> Booking </title> 
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="styles.css">
    <script>
        function validate{} {
        result = true;
        contentUsername=booking.username.value;
        if (contentUsername=="")
        result=false;
        }

    </script>

    <script>
    function validate() {
        result = true;
        contentUsername=booking.username.value;
        contentEmail=booking.email.value;
        contentDate=booking.date.value;

        var email = /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,6}$/;
        var username = /^[A-Za-z]+[A-Za-z\s\.'-]+[A-Za-z]$/;
        var date = /^(?:(?:31(\/|-|\.)(?:0?[13578]|1[02]))\1|(?:(?:29|30)(\/|-|\.)(?:0?[1,3-9]|1[0-2])\2))(?:(?:1[6-9]|[2-9]\d).\d{2})$|^(?:29(\/|-|\.)0?2\3(?:(?:(?:1[6-9]|[2-9]\d).(?:0[48]|[2468][048]|[13579][26])|(?:(?:16|[2468][048]|[3579][26])00))))$|^(?:0?[1-9]|1\d|2[0-8])(\/|-|\.)(?:(?:0?[1-9])|(?:1[0-2]))\4(?:(?:1[6-9]|[2-9]\d).\d{2})$/;

        var alertMessage="";


        if (contentUsername==""){
            result=false;
            document.getElementById('username').style.background="lightyellow";
            document.getElementById('username').style.border="solid firebrick 1px";
        }

        if (contentEmail=="") {
            result=false;
            document.getElementById('email').style.background="lightyellow";
            document.getElementById('email').style.border="solid firebrick 1px";
        }

        if (contentDate=="") {
            result=false;
            document.getElementById('date').style.background"lightyellow";
            document.getElementById('date').style.border="solid firebrick 1px";
        }

        if (!(email.test(contact.email.value)) && contact.email.value != "") {
            alertMessage += contact.email.value + ' is not a valid email address.\r\n';
            result=false;
        }

        if (!(username.test(contact.username.value)) && contact.username.value != "") {
            alertMessage += contact.username.value + ' is not a valid name.\r\n';
            result=false;
        }

        if (!(date.test(contact.date.value)) && contact.date.value != "") {
            alertMessage += contact.date.value + ' is not a valid date. Please select a date in 2017.\r\n';
            result=false;
        }

        if (!result) {
            alertMessage += "Please fill out the highlighted fields";
            alert(alertMessage);
        }

        return result;
    }
    </script>
</head>

<body>
<div id="header">
    <div id="branding">
        <img src="Images/logo.png">
    </div><!-- end of "logo" -->
    <div id="tagline">
    <p> Welcome to yourday.com - We hope you enjoy your visit! 
    <br> This is where you can book an appointment with one of our agents!
    <br> Please note: Dates for 2016 are fully booked. Next available appointments are in 2017. We apologies for any inconvenience caused.</p>

    </div><!-- end of "tagline" -->
</div><!-- end of "header" -->

<div id="bodycontent4">
    <form action="http://www.rebol.com/cgi-bin/test-cgi.cgi" method="post" class="booking" id="booking" onsubmit="return validate()">
        <fieldset>
            <legend>Booking</legend>
            <label for="username">Name: </label>
            <input type="text" name="username" id="username"></br>
            <label for="email">E-mail:</label>
            <input type="text" name="email" id="email"></br>
            <label for="date">Date:</label>
            <input type="date" name="date" id="date"></br>
            <label for="location">Location:</label>
            <select>
                <option value="manor">Uppercourt Manor</option>
                <option value="killruddery">Killrudderry</option>
                <option value="carriage">The Carriage Rooms</option>
                <option value="coolclogher">Coolclogher House</option>
            </select>
        </fieldset>
        <input type="submit" value="Submit">
    </form>
</div><!--end of "bodycontent" -->



<div id="navigation">
<ul class="topnav" id="TopNav">
    <li><a href="home.html">Home</a></li>
    <li><a href="locations.html">Locations</a></li>
    <li><a href="booking.html">Booking</a></li>
    <li><a href="testimonials.html">Testimonials</a></li>
    <li><a href="contact.html">Contact Us</a></li>
    <li><a href="about.html">About</a></li>

    </li>
</ul>
</div> <!--end of "navigation" -->

<div id="footer" style = "position: absolute; top: 550px;">
  <p>Created by: Calvin Leong</p>
  <p>Contact information: <a href="mailto:calvin.leong@CLDesign.com">calvin.leong@CLDesign.com</a></p>
</div>

</body>
</html>

CSS

/* Booking Form */
form.booking label {
    display: block;
    width: 100px;
    float: left;
    font-weight: bold;
    font-size: small;
    color: black;
    line-height: 150%
}

form.booking fieldset {
    border: 2px solid red;
    padding: 10px;
}

form.booking legend {
    font-weight: bold;
    font-size: small;
    color: black;
    padding: 5px;
}

#bodycontent4 {
    position: absolute;
    top: 270px;
    width: 25%;
    left: 500px;

}

#div {
    margin: 0 auto;
}

Answer 1

你可以这样做：

var date = new Date("01/01/2017");
var year = date.getFullYear();
if(year == 2017){
    alert(year);
}else{
    alert("crap");
}

Answer 2

这是你的日期正则表达式：

var date = /^2017-\d{2}-\d{2}$/;

而且，这是工作链接：http://jsbin.com/getunisagi

正则表达式验证日期

2 个答案: