zoukankan      html  css  js  c++  java
  • js验证日期

      寻寻觅觅,Web开发里,对日期的验证太多了,网上好多是用正则表达式来验证,但是这种验证也只能验证格式,没办法验证有效性,比如平年(2月28天)和闰年(2月29天)。平时用得多,以前经常用一次写一次,腻了,所以今天写下来,以后直接Copy,今天提供两个方法:

    1.用纯Js代码来验证

       这个要注意的也就是对2月份的判断,就是加个Switch...Case而已,就不一一解释,代码中有注释,

      这个方法满足以下格式的日期:20100912、2010-01-02、2012/2/2、20121212

    先上完整代码(需要的朋友直接复制):

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title></title>
        <script src="jquery-1.10.2.js"></script>
        <script type="text/javascript">
            function btnClick()
            {
                if (!checkDate(document.getElementById("inputDate")))
                {
                    alert("日期格式错误");
                }
                else
                    alert("验证通过");
            }
    function checkDate(element)//讀取分隔符,日期輸入框的對象
            {
                var strDate = $(element).val();
                var splitStr = "";
                if (!checkInt(strDate)) {
                    for (var i = 0; i < strDate.length; i++) {
                        if (!checkInt(strDate[i])) {
                            splitStr = strDate[i];
                            if (splitStr != "-" && splitStr != "/" && splitStr != "\")//默认只能有这几种分隔符(因为目前后台代码能转化时间的也就这三种好像                                                  ),需要的自己加
                            {
                                return false;
                            }
                            break;
                        }
    } }
    else//如果是數字,則沒有分隔符,則默認格式為20121011 { if (strDate.length != 8) { return false; } splitStr = "/"; var s1 = strDate.substring(0, 4) + splitStr; var s2 = strDate.substring(4, 6) + splitStr; var s3 = strDate.substring(6, 8);
    strDate
    = s1 + s2 + s3; } $(element).val(strDate);//如果沒有分隔符,把分隔符插入之後,賦值給文本框,類似於格式化日期 return validateDate(strDate, splitStr); } function validateDate(strDate, splitStr) { splitStr = splitStr.trim(); var year; var month; var day;var arr = strDate.split(splitStr); if (arr.length != 3) { return false;//不等於三個數字,則分隔符有問題,或者數字有問題; } else { year = arr[0]; month = arr[1]; day = arr[2]; if (!checkInt(year) || !checkInt(month) || !checkInt(day)) { return false;//輸入了非數字 } return checkYear(year, month, day); } } function checkInt(num) {//验证是否是纯数字 var reg = /^-?d+$/;//对正则表达式不熟,知道的朋友帮忙解释下"-?"的意思 if (reg.test(num)) { return true; } else { return false; } } function checkYear(year, month, day) {//验证平年闰年 var result = true; year = parseInt(year); month = parseInt(month); day = parseInt(day); if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0)//閏年,2月 29天 { switch (month) { case 1: result = (day <= 31); break; case 3: result = (day <= 31); break; case 5: result = (day <= 31); break; case 7: result = (day <= 31); break; case 8: result = (day <= 31); break; case 10: result = (day <= 31); break; case 12: result = (day <= 31); break; case 4: result = (day <= 30); break; case 6: result = (day <= 30); break; case 9: result = (day <= 30); break; case 11: result = (day <= 30); break; case 2: result = (day <= 29); break; default: result = false; } } else//平年,2月 28天 { switch (month) { case 1: result = (day <= 31); break; case 3: result = (day <= 31); break; case 5: result = (day <= 31); break; case 7: result = (day <= 31); break; case 8: result = (day <= 31); break; case 10: result = (day <= 31); break; case 12: result = (day <= 31); break; case 4: result = (day <= 30); break; case 6: result = (day <= 30); break; case 9: result = (day <= 30); break; case 11: result = (day <= 30); break; case 2: result = (day <= 28); break; default: result = false; } } return result; } </script> </head> <body> <input type="text" id="inputDate" /> <input type="button" onclick="btnClick()" value="验证" /> </body> </html>

    2.将日期字符串转为Date类型

      精华只有一句,但是不能支持20141024这种格式,所以如果是输入这种格式,那就给它处理一下,先上精华代码:

       return (new Date(strDate).getDate() == strDate.substring(strDate.length - 2)); 

      有了这句,能判断2010-01-02、2012/02/02、20121212这三种格式的日期,缺点就是不能判断20100912这种类型,所以以下对20100912这种类型的数据进行处理,也能用了。这个2012/2/2这种是无法验证的,需要的自己给它加0吧,转为2012/02/02的形式。

      这句啥意思我也不懂,不过能用就是了。

     给出能支持20100912、2010-01-02、2012/02/02、20121212这四种格式的代码:

    <script type="text/javascript">
    
            function checkDate2(element)//讀取分隔符,日期輸入框的javascript對象
            {
                var strDate = $(element).val();
                var splitStr = "";
                if (!checkInt(strDate)) {
                    for (var i = 0; i < strDate.length; i++) {
                        if (!checkInt(strDate[i])) {
                            splitStr = strDate[i];
                            if (splitStr != "-" && splitStr != "/" && splitStr != "\") {
    return false;
                            }
                            break;
                        }
                    }
                }
                else//如果是數字,則沒有分隔符,則默認格式為20121011
                {
                    if (strDate.length != 8) {
                        return false;
                    }
    
                    splitStr = "/";
                    var s1 = strDate.substring(0, 4) + splitStr;
                    var s2 = strDate.substring(4, 6) + splitStr;
                    var s3 = strDate.substring(6, 8);
              if(
    strDate.substring(4, 6)=="00")//加上这个的原因是,下面那句居然对2014/00/12这个 也会验证通过,所以这边做个特殊处理
              {
                return false;
              }
             strDate
    = s1 + s2 + s3; $(element).val(strDate);//如果沒有分隔符,把分隔符插入之後,賦值給文本框,類似於格式化日期
          }
          
          return (new Date(strDate).getDate() == strDate.substring(strDate.length - 2));//精华一句 } </script>
     

      

    总结:

    第二个简洁一点,不过都是可用的。记录下来,以后直接复制黏贴(ˇˍˇ) ,不知道有没有漏掉什么,欢迎批斗

            
  • 相关阅读:
    SCOI2020游记
    关于我
    WC2020游记
    CSP-S 2019 游记
    回文自动机学习笔记
    全自动数字论证机(迫真)
    树状数组上二分
    《伊豆的舞女》 读书小记
    雅礼集训2019 Day5
    雅礼集训2019 Day4
  • 原文地址:https://www.cnblogs.com/LJP-JumpAndFly/p/4048187.html
Copyright © 2011-2022 走看看