最近,在跟一个项目,涉及到填写日期是否正确有效的问题。(PS,这个问题很重要,涉及数据库方面...具体的就不说了...)
虽然我可以限制用户只能使用日期控件填写日期,但是,我发现,这个日期控件好像不是万能的,在某些浏览器根本用不了...
哎~还是采用最原始的方法好了~~以下是我自己写的代码,暂时没发现什么问题,跟大伙分享下哈~
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>CheckDateFormat</title>
<!--<script type="text/javascript" src="js/jquery.js"></script>-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript">
/*
*参数
* reg:正则表达式
* str:要检查的字符串
*功能
* 检查str是否满足reg格式
*返回值
* true或者false
*/
function testReg(reg, str) {
//RegExpObject.test(string)用于检测一个字符串是否匹配某个模式.
return reg.test(str);
}
/*
*参数
* dateStr:客户端输入的日期字符串
*功能
* 检查dateStr日期格式是否正确
*返回值
* true或者false
*/
function checkDateFormat(dateStr) {
var regDateFormat1 = /^\d{4}-\d{1,2}-\d{1,2}$/;
var regDateFormat2 = /^\d{4}\/\d{1,2}\/\d{1,2}$/;
var regDateFormat3 = /^\d{4}\.\d{1,2}\.\d{1,2}$/;
if (!testReg(regDateFormat1, dateStr)) { //调用testReg函数
if (!testReg(regDateFormat2, dateStr)) { //调用testReg函数
if (!testReg(regDateFormat3, dateStr)) { //调用testReg函数
return false;
}
else {
return true;
}
}
else {
return true;
}
}
else {
return true;
}
}
/*
*参数
* dateStr:客户端输入的日期字符串
*功能
* 检查dateStr日期是否有效(年、月、日是否有效),分闰年、平年、大月、小月考虑
*返回值
* true或者false
*/
function checkDateValid(dateStr) {
//stringObject.indexOf(searchvalue,fromindex)返回某个指定的字符串值在字符串中首次出现的位置。如果要检索的字符串值没有出现,则该方法返回 -1。
var sepa1 = dateStr.indexOf("-");
var sepa2 = dateStr.indexOf("/");
var sepa3 = dateStr.indexOf(".");
var sepa = "";
if (sepa1 > -1) {
sepa = "-";
}
else if (sepa2 > -1) {
sepa = "/";
}
else if (sepa3 > -1) {
sepa = ".";
}
//stringObject.split(separator, howmany)把一个字符串分割成字符串数组。
var arrDate = dateStr.split(sepa);
var year = parseInt(arrDate[0]);
var month = parseInt(arrDate[1]);
var day = parseInt(arrDate[2]);
/*
* datetime数据类型在MS SQL Server 取值范围是1753-1-1到9999-12-31
*
* if 西元年份是400的倍数 : 闰年
else if 西元年份是4的倍数 and 西元年份不是100的倍数 : 闰年
else : 平年
*
* 2月:平年为28天,闰年为29天
30天的月份:4、6、9、11
31天的月份:1、3、5、7、8、10、12
*
*/
if (year < 1753 || year > 9999 || month < 1 || month > 12 || day < 1 || day > 31) {
//alert("1");
return false;
}
else {
if (year % 400 == 0 || (year % 4 == 0 && year % 100 != 0)) { //闰年
//alert("2");
if ((month == 2 && day > 29) || ((month == 4 || month == 6 || month == 9 || month == 11) && day > 30) || ((month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12) && day > 31)) {
//alert("3");
return false;
}
else {
//alert("4");
return true;
}
}
else { //平年
//alert("5");
if ((month == 2 && day > 28) || ((month == 4 || month == 6 || month == 9 || month == 11) && day > 30) || ((month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12) && day > 31)) {
//alert("6");
return false;
}
else {
//alert("7");
return true;
}
}
}
}
$(function () {
//日期框失去焦点时触发
$("#date").blur(function () {
var $dateVal = $(this).val();
var dateErrMsg = "";
if ($dateVal == "") {
dateErrMsg = "日期不能为空!";
//alert(dateErrMsg);
$("#lableDateErrMsg").html(dateErrMsg);
$date.focus();
return false;
}
else if ($dateVal.length < 8) {
dateErrMsg = "日期位数不能少于8位!";
//alert(dateErrMsg);
$("#lableDateErrMsg").html(dateErrMsg);
$date.focus();
return false;
}
else {
if (!checkDateFormat($dateVal)) { //调用checkDateFormat函数
dateErrMsg = "日期格式不正确!(正确格式如“yyyy-mm-dd”或者“yyyy/mm/dd”或者“yyyy.mm.dd”)";
//alert(dateErrMsg);
$("#lableDateErrMsg").html(dateErrMsg);
$date.focus();
return false;
}
else {
if (!checkDateValid($dateVal)) { //调用checkDateValid函数
dateErrMsg = "日期无效!(日期范围是1753-1-1到9999-12-31。30天的月份:4、6、9、11;31天的月份:1、3、5、7、8、10、12;2月:平年为28天,闰年为29天)";
//alert(dateErrMsg);
$("#lableDateErrMsg").html(dateErrMsg);
$date.focus();
return false;
}
else {
dateErrMsg = "";
//alert(dateErrMsg);
$("#lableDateErrMsg").html(dateErrMsg);
}
}
}
});
//单击“检查日期”按钮时触发
// $("#submit").click(function () {
// var $date = $("#date");
// var $dateVal = $date.val();
// var dateErrMsg = "";
// if ($dateVal == "") {
// dateErrMsg = "日期不能为空!";
// //alert(dateErrMsg);
// $("#lableDateErrMsg").html(dateErrMsg);
// $date.focus();
// return false;
// }
// else if ($dateVal.length < 8) {
// dateErrMsg = "日期位数不能少于8位!";
// //alert(dateErrMsg);
// $("#lableDateErrMsg").html(dateErrMsg);
// $date.focus();
// return false;
// }
// else {
// if (!checkDateFormat($dateVal)) { //调用checkDateFormat函数
// dateErrMsg = "日期格式不正确!(正确格式如“yyyy-mm-dd”或者“yyyy/mm/dd”或者“yyyy.mm.dd”)";
// //alert(dateErrMsg);
// $("#lableDateErrMsg").html(dateErrMsg);
// $date.focus();
// return false;
// }
// else {
// if (!checkDateValid($dateVal)) { //调用checkDateValid函数
// dateErrMsg = "日期无效!(日期范围是1753-1-1到9999-12-31。30天的月份:4、6、9、11;31天的月份:1、3、5、7、8、10、12;2月:平年为28天,闰年为29天)";
// //alert(dateErrMsg);
// $("#lableDateErrMsg").html(dateErrMsg);
// $date.focus();
// return false;
// }
// else {
// dateErrMsg = "";
// //alert(dateErrMsg);
// $("#lableDateErrMsg").html(dateErrMsg);
// }
// }
// }
// });
});
</script>
<style type="text/css">
#lableDateErrMsg {
color:red;
font-size:12px;
}
</style>
</head>
<body>
<label id="labelDate">日期:</label><input type="text" id="date" name="date" maxlength="10" /><label id="lableDateErrMsg"></label><br />
<!--<input type="submit" id="submit" name="submit" value="检查日期" />-->
</body>
</html>
PS:欢迎留言!欢迎指出错误!欢迎帮我优化!哈哈~~
虽然我可以限制用户只能使用日期控件填写日期,但是,我发现,这个日期控件好像不是万能的,在某些浏览器根本用不了...
哎~还是采用最原始的方法好了~~以下是我自己写的代码,暂时没发现什么问题,跟大伙分享下哈~
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>CheckDateFormat</title>
<!--<script type="text/javascript" src="js/jquery.js"></script>-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript">
/*
*参数
* reg:正则表达式
* str:要检查的字符串
*功能
* 检查str是否满足reg格式
*返回值
* true或者false
*/
function testReg(reg, str) {
//RegExpObject.test(string)用于检测一个字符串是否匹配某个模式.
return reg.test(str);
}
/*
*参数
* dateStr:客户端输入的日期字符串
*功能
* 检查dateStr日期格式是否正确
*返回值
* true或者false
*/
function checkDateFormat(dateStr) {
var regDateFormat1 = /^\d{4}-\d{1,2}-\d{1,2}$/;
var regDateFormat2 = /^\d{4}\/\d{1,2}\/\d{1,2}$/;
var regDateFormat3 = /^\d{4}\.\d{1,2}\.\d{1,2}$/;
if (!testReg(regDateFormat1, dateStr)) { //调用testReg函数
if (!testReg(regDateFormat2, dateStr)) { //调用testReg函数
if (!testReg(regDateFormat3, dateStr)) { //调用testReg函数
return false;
}
else {
return true;
}
}
else {
return true;
}
}
else {
return true;
}
}
/*
*参数
* dateStr:客户端输入的日期字符串
*功能
* 检查dateStr日期是否有效(年、月、日是否有效),分闰年、平年、大月、小月考虑
*返回值
* true或者false
*/
function checkDateValid(dateStr) {
//stringObject.indexOf(searchvalue,fromindex)返回某个指定的字符串值在字符串中首次出现的位置。如果要检索的字符串值没有出现,则该方法返回 -1。
var sepa1 = dateStr.indexOf("-");
var sepa2 = dateStr.indexOf("/");
var sepa3 = dateStr.indexOf(".");
var sepa = "";
if (sepa1 > -1) {
sepa = "-";
}
else if (sepa2 > -1) {
sepa = "/";
}
else if (sepa3 > -1) {
sepa = ".";
}
//stringObject.split(separator, howmany)把一个字符串分割成字符串数组。
var arrDate = dateStr.split(sepa);
var year = parseInt(arrDate[0]);
var month = parseInt(arrDate[1]);
var day = parseInt(arrDate[2]);
/*
* datetime数据类型在MS SQL Server 取值范围是1753-1-1到9999-12-31
*
* if 西元年份是400的倍数 : 闰年
else if 西元年份是4的倍数 and 西元年份不是100的倍数 : 闰年
else : 平年
*
* 2月:平年为28天,闰年为29天
30天的月份:4、6、9、11
31天的月份:1、3、5、7、8、10、12
*
*/
if (year < 1753 || year > 9999 || month < 1 || month > 12 || day < 1 || day > 31) {
//alert("1");
return false;
}
else {
if (year % 400 == 0 || (year % 4 == 0 && year % 100 != 0)) { //闰年
//alert("2");
if ((month == 2 && day > 29) || ((month == 4 || month == 6 || month == 9 || month == 11) && day > 30) || ((month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12) && day > 31)) {
//alert("3");
return false;
}
else {
//alert("4");
return true;
}
}
else { //平年
//alert("5");
if ((month == 2 && day > 28) || ((month == 4 || month == 6 || month == 9 || month == 11) && day > 30) || ((month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12) && day > 31)) {
//alert("6");
return false;
}
else {
//alert("7");
return true;
}
}
}
}
$(function () {
//日期框失去焦点时触发
$("#date").blur(function () {
var $dateVal = $(this).val();
var dateErrMsg = "";
if ($dateVal == "") {
dateErrMsg = "日期不能为空!";
//alert(dateErrMsg);
$("#lableDateErrMsg").html(dateErrMsg);
$date.focus();
return false;
}
else if ($dateVal.length < 8) {
dateErrMsg = "日期位数不能少于8位!";
//alert(dateErrMsg);
$("#lableDateErrMsg").html(dateErrMsg);
$date.focus();
return false;
}
else {
if (!checkDateFormat($dateVal)) { //调用checkDateFormat函数
dateErrMsg = "日期格式不正确!(正确格式如“yyyy-mm-dd”或者“yyyy/mm/dd”或者“yyyy.mm.dd”)";
//alert(dateErrMsg);
$("#lableDateErrMsg").html(dateErrMsg);
$date.focus();
return false;
}
else {
if (!checkDateValid($dateVal)) { //调用checkDateValid函数
dateErrMsg = "日期无效!(日期范围是1753-1-1到9999-12-31。30天的月份:4、6、9、11;31天的月份:1、3、5、7、8、10、12;2月:平年为28天,闰年为29天)";
//alert(dateErrMsg);
$("#lableDateErrMsg").html(dateErrMsg);
$date.focus();
return false;
}
else {
dateErrMsg = "";
//alert(dateErrMsg);
$("#lableDateErrMsg").html(dateErrMsg);
}
}
}
});
//单击“检查日期”按钮时触发
// $("#submit").click(function () {
// var $date = $("#date");
// var $dateVal = $date.val();
// var dateErrMsg = "";
// if ($dateVal == "") {
// dateErrMsg = "日期不能为空!";
// //alert(dateErrMsg);
// $("#lableDateErrMsg").html(dateErrMsg);
// $date.focus();
// return false;
// }
// else if ($dateVal.length < 8) {
// dateErrMsg = "日期位数不能少于8位!";
// //alert(dateErrMsg);
// $("#lableDateErrMsg").html(dateErrMsg);
// $date.focus();
// return false;
// }
// else {
// if (!checkDateFormat($dateVal)) { //调用checkDateFormat函数
// dateErrMsg = "日期格式不正确!(正确格式如“yyyy-mm-dd”或者“yyyy/mm/dd”或者“yyyy.mm.dd”)";
// //alert(dateErrMsg);
// $("#lableDateErrMsg").html(dateErrMsg);
// $date.focus();
// return false;
// }
// else {
// if (!checkDateValid($dateVal)) { //调用checkDateValid函数
// dateErrMsg = "日期无效!(日期范围是1753-1-1到9999-12-31。30天的月份:4、6、9、11;31天的月份:1、3、5、7、8、10、12;2月:平年为28天,闰年为29天)";
// //alert(dateErrMsg);
// $("#lableDateErrMsg").html(dateErrMsg);
// $date.focus();
// return false;
// }
// else {
// dateErrMsg = "";
// //alert(dateErrMsg);
// $("#lableDateErrMsg").html(dateErrMsg);
// }
// }
// }
// });
});
</script>
<style type="text/css">
#lableDateErrMsg {
color:red;
font-size:12px;
}
</style>
</head>
<body>
<label id="labelDate">日期:</label><input type="text" id="date" name="date" maxlength="10" /><label id="lableDateErrMsg"></label><br />
<!--<input type="submit" id="submit" name="submit" value="检查日期" />-->
</body>
</html>
PS:欢迎留言!欢迎指出错误!欢迎帮我优化!哈哈~~