Question

当用户输入无效的日期格式时，是否有任何方法可以显示验证错误消息或边框变为红色？。在我的演示应用程序中，有两个输入字段，其中我正在显示日期，例如“ 1989年6月16日”。现在，用户如果用户输入无效的格式，则只能以这种格式（有效）编辑此字段。我要在单击按钮时显示错误消息，或者单击按钮时边框变为红色 这是我的代码 http://plnkr.co/edit/xoTH3uJZSVx0W78rwhMt?p=preview

var app = angular.module('plunker', ['angularMoment']);

app.controller('MainCtrl', function($scope ,moment) {
  $scope.name = 'World';
  console.log(moment)
  var d = new Date(613938600000);
  $scope.c = {
   ab: {
      name:'abc'
    },
   date: {
      name: moment(d).format('DD-MMM-YYYY')
    }
    };

    $scope.onclick =function(){
        console.log($scope.c)
    }

});

Answer 1

由于您已经在使用时刻，请通过以下方式检查日期是否有效：

moment($scope.c.date.name).isValid()

工作示例here.

Answer 2

尽管这已经有了答案。您可能还对确保准确指定日期的方式感兴趣。接受答案中的验证并不严格：这应该解决以下问题：

$scope.onclick = function() {
    if (!moment($scope.c.date.name, 'DD-MMM-YYYY').isValid()) {
      alert('Date must be in the format 02-Nov-2018');
    } else {
      alert('All good');
    }
}

moment函数的第二个参数确保了这种严格性。

当用户单击按钮时输入无效的日期格式时，如何显示验证错误？

2 个答案: