一、首先看需求
日期的输入:
手动输入,可输入两种格式yyyymmdd或yyyy-mm-dd
二、解决思路
用户手动输入日期,需要验证输入的日期格式
用户可能的输入情况可以分为以下几种:
(1).输入为空或者为空格
(2).输入非日期格式
根据保存到数据库中的日期格式,保存的格式为yyyy-mm-dd,所以用户在输入yyyymmdd后需要进行转换,转换成yyyy-mm-dd。
思路:
验证日期格式,首现想到的是VS的验证控件,但是因为需要验证的控件有几十个,使用验证控件就需要一个个的拉控件,如果后期需要修改也很麻烦,而通过JS实现控制,再通过正则表达式对日期进行验证。
三、JS实现
//验证日期
function date(id) {
var idvalue = document.getElementById(id).value; //通过查找元素
var tmpStr = "";
var strReturn = "";
//调用trim()去掉空格,因为js不支持trim()
var iIdNo = trim(idvalue);
//正则表达式,判断日期格式,包括日期的界限,日期的格式,平年和闰年
var v = idvalue.match(/^((((1[6-9]|[2-9]\d)\d{2})-(0?[13578]|1[02])-(0?[1-9]|[12]\d|3[01]))|(((1[6-9]|[2-9]\d)\d{2})-(0?[13456789]|1[012])-(0?[1-9]|[12]\d|30))|(((1[6-9]|[2-9]\d)\d{2})-0?2-(0?[1-9]|1\d|2[0-8]))|(((1[6-9]|[2-9]\d)(0[48]|[2468][048]|[13579][26])|((16|[2468][048]|[3579][26])00))-0?2-29-))$/);
//输入为空时跳过检测
if (iIdNo.length == 0) {
return false;
}
//自动更改日期格式为yyyy-mm-dd
if (iIdNo.length == 8) {
tmpStr = iIdNo.substring(0, 8);
tmpStr = tmpStr.substring(0, 4) + "-" + tmpStr.substring(4, 6) + "-" + tmpStr.substring(6, 8)
document.getElementById(id).value = tmpStr;
document.getElementById(id).focus();
}
//验证,判断日期格式
if ((iIdNo.length != 8) && !v) {
strReturn = "日期格式错误,提示:19990101或1999-01-01";
alert(strReturn);
document.getElementById(id).select();
return false;
}
}
//运用正则表达式去除字符串两端空格(因为js不支持trim())
function trim(str) {
return str.replace(/(^\s*)|(\s*$)/g, "");
}
//前台调用(获得焦点触发)
<input class="txtenterschooldate" size="14" type="text" id="txtenterschooldate" name="txtenterschooldate" οnblur="date('txtenterschooldate')"/>
四、对JS的感受
没使用js之前感觉js很难,不知道怎么使用,这一次实现虽然设计的代码很少,但对JS的功能和应用有了了解,通过这次的人事系统,真正的把实践结合了起来。