【问题标题】:validate date to mm/dd/yyyy format in javascript在 javascript 中验证日期为 mm/dd/yyyy 格式
【发布时间】:2016-01-26 09:46:36
【问题描述】:

我有一个 MVC 日期字段,我正在尝试将其验证为 mm/dd/yyyy 格式。我不希望用户输入 1,2 或 3 位数字作为年份。而且,我想确保输入了有效的日期。这是我正在使用的代码:

 <script type="text/javascript">
        $(function () {
            $('.datepicker').datepicker();
            ForceDatePickerFormat();
        });

        function ForceDatePickerFormat() {
            $(".datepicker").on("blur", function (e) {

                var date, day, month, newYear, value, year;
                value = e.target.value;
                if (value.search(/(.*)\/(.*)\/(.*)/) !== -1) {
                    date = e.target.value.split("/");
                    month = date[0];
                    day = date[1];
                    year = date[2];
                    if (year === "") {
                        year = "0";
                    }
                    if (year.length < 4) {
                        alert ("Date year must by 4 digits");
                     }
              }
            });
        }

     </script>

我使用“模糊”是因为“keyup”在用户尝试更改它的年份引起了一个奇怪的问题。 “模糊”很好,除了用户必须单击以使日历消失,选项卡不起作用,单击日期不起作用。如果用户点击返回,它会接受日期而不进行验证。我需要允许用户手动输入日期,因为他们以后经常输入日期。有没有人对如何调整它有任何建议,以便单击日期关闭日历,选项卡关闭日历,并且日期仍然有效?

【问题讨论】:

  • 或者在代码中使用这个正则表达式 ::: -- '((?:[0]?[1-9]|[1][012])[-:\\/. ](?:(?:[0-2]?\\d{1})|(?:[3][01]{1}))[-:\\/.](?:(?:[ 1]{1}\\d{1}\\d{1}\\d{1})|(?:[2]{1}\\d{3})))(?![\\d ])';

标签: javascript validation date datepicker


【解决方案1】:

这是您需要的 sn-p。如果给定日期有效/无效,您只需将日期传递给下面的函数,该函数返回真/假

function validateDate(dateValue)
{
    var selectedDate = dateValue;
    if(selectedDate == '')
        return false;

    var regExp = /^(\d{1,2})(\/|-)(\d{1,2})(\/|-)(\d{4})$/; //Declare Regex
    var dateArray = selectedDate.match(regExp); // is format OK?

    if (dateArray == null){
        return false;
    }

    month = dateArray[1];
    day= dateArray[3];
    year = dateArray[5];        

    if (month < 1 || month > 12){
        return false;
    }else if (day < 1 || day> 31){ 
        return false;
    }else if ((month==4 || month==6 || month==9 || month==11) && day ==31){
        return false;
    }else if (month == 2){
        var isLeapYear = (year % 4 == 0 && (year % 100 != 0 || year % 400 == 0));
        if (day> 29 || (day ==29 && !isLeapYear)){
            return false
        }
    }
    return true;
}

上述函数将:

  • 检查正确的日期格式为 MM/DD/YYYY。
  • 检查给定日期是否有效。例如:四月只有 30 天。如果我们将 4 月的日期指定为 31,那么此函数将验证它为无效日期。
  • 检查 2 月 29 日。只有当指定的年份是闰年时,它才会验证为有效日期。

更多信息请点击链接:http://www.j2eekart.com/2015/01/date-validation-in-javascript.html

将您的代码更改为:

<script type="text/javascript">
    $(document).ready(function(){
        $('.datepicker').datepicker();

        $(".datepicker").on("blur", function (e){
            var isValidDate = validateDate(e.target.value);
            if(!isValidDate){
                 alert("Please enter a valid date in MM/DD/YYYY format");
            }
        });
    });

    function validateDate(dateValue)
    {
        var selectedDate = dateValue;
        if(selectedDate == '')
           return false;

        var regExp = /^(\d{1,2})(\/|-)(\d{1,2})(\/|-)(\d{4})$/; //Declare Regex
        var dateArray = selectedDate.match(regExp); // is format OK?

        if (dateArray == null){
            return false;
        }

        month = dateArray[1];
        day= dateArray[3];
        year = dateArray[5];        

        if (month < 1 || month > 12){
            return false;
        }else if (day < 1 || day> 31){ 
            return false;
        }else if ((month==4 || month==6 || month==9 || month==11) && day ==31){
            return false;
        }else if (month == 2){
            var isLeapYear = (year % 4 == 0 && (year % 100 != 0 || year % 400 == 0));
            if (day> 29 || (day ==29 && !isLeapYear)){
                return false
            }
        }
        return true;
    }
</script>

【讨论】:

  • 这很好,感谢您的回答!现在我把日期选择器放在那里,客户真的很喜欢弹出日历。我可以在日期选择器中使用您的代码(即:将其放在 on."blur" 部分之后)而不是我拥有的日期检查吗?
  • 它不会让我支持它。我单击向上箭头,它变成“1”,然后又变回 0。
  • 我已经尝试了许多不同的方法来让它在我的 datepicker 代码中工作,但我无法实现。我是否只是复制您的代码并替换我为函数 ForceDatePickerFormat() 所拥有的代码?只是从字面上使用您的功能而不是我的功能?或者,把你的放在 on."blur" 下?抱歉,我对此很陌生。
  • 谢谢!你不知道这有多大帮助。我一直在客户端和服务器端都在做这个......这太完美了!
  • @NightOwl 你来自哪里??
猜你喜欢
  • 2015-02-07
  • 2010-09-21
  • 2014-01-18
  • 2022-11-29
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2023-04-01
  • 1970-01-01
相关资源
最近更新 更多