0
基本的に、私は練習用ウェブサイトの予約フォームを作成しています。 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._%+-][email protected][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:[email protected]">[email protected]esign.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;
}
これは正規表現を使用して、全く適切ではない多くの例です。代わりに、 'Date'オブジェクトを操作し、年フィールドが2017であることを単に確認する必要があります。ところで、あなたのコードが2017年、あるいは2018年にどう動くべきかを考えましたか？たぶん、次の年に日付があることを確認するほうが適切でしょう（そして再び正規表現はこれには適切ではないでしょう） – Aaron