<Javascript>图灵丛书例子：检查日期格式

最新推荐文章于 2021-11-09 19:24:02 发布

原创最新推荐文章于 2021-11-09 19:24:02 发布 · 1.9k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #date #xhtml #input #html #action

Javascript/Jquery 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一个简单的HTML页面，该页面使用JavaScript进行日期格式验证。当用户输入不符合DD/MM/YY格式的日期时，会显示错误消息。

参照图灵丛书上面的检查日期格式例子，其中html代码如下：

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="checkdate.js"></script>
<style type="text/css">
.error{
	color:#c00;
	font-weight:bold;
}
</style>
</head>

<body>
<h1>Event Search</h1>
<form action="Js_2.html" method="post" onsubmit="return checkDate();">
	<p>
    	<label for="date">Date in format DD/MM/YY:</label><br />
        <input type="text" id="date" name="date" />
        <input type="submit" value="Check" />
		<!-- 注意此处span标签中间有一个空格-->
        <br />(example 24/04/1975)<span class="error"> </span>
    </p>
</form>
</body>
</html>

checkdate.js部分代码如下：

// JavaScript Document
function checkDate(){
	if(!document.getElementById || !document.createTextNode){return;}
	var dateField = document.getElementById('date');
	if(!dateField){return;}
	var errorContainer = dateField.parentNode.getElementsByTagName('span')[0];
	if(!errorContainer){return;}
	var checkPattern = new RegExp("\\d{2}/\\d{2}/\\d{4}");
	var errorMessage = '';
	errorContainer.firstChild.nodeValue = ' ';
	var dateValue = dateField.value;
	if(dateValue == ''){
		errorMessage = 'Please provide a date.';
	}else if(!checkPattern.test(dateValue))
	{
		errorMessage = 'Please provide the date in the defined format.';
	}
	if(errorMessage!=' ')
	{
		errorContainer.firstChild.nodeValue = errorMessage;
		dateField.focus();
		return false;
	}else{
		return true;
	}
}