Angularjs 角度js中的时间验证

我有一个字段，它接受时间的输入，比如12:00/24:00 我希望过去能够只填写数字和：在字段和更改时用适当的时间验证它。我想用有角度的方式来做。我该怎么做

这是我写的代码。这也可以在1指令中完成。这段代码有效，但不是更好的代码

<input  type="text" ng-model-options="{allowInvalid: true}" ng-blur="validateHhMm(this)" ng-model='time' time-only/>


angular.module('abc').directive('timeOnly', function(){
    return {
        require: 'ngModel',
        link: function(scope, element, attrs, modelCtrl) {

            modelCtrl.$parsers.push(function (inputValue) {
                var transformedInput = inputValue ? inputValue.replace(/[^\d:]/g,'') : null;

                if (transformedInput!=inputValue) {
                    modelCtrl.$setViewValue(transformedInput);
                    modelCtrl.$render();
                }

                return transformedInput;
            });
        }
    };
});


$scope.validateHhMm =  function (inputField)
    {
        var errorMsg = "";
        var regs = '';
        // regular expression to match required time format
        var re = /^(\d{1,2}):(\d{2})?$/;
        var inputvalue = $scope.time;
        if(inputvalue != '')
        {
            if(regs = inputvalue.match(re))
            {
            if(regs[4])
            {
                // 12-hour time format with am/pm
                if(regs[1] < 1 || regs[1] > 12)
                {
                    errorMsg = "Invalid value for hours: " + regs[1];
                }
            }
            else
            {
                if(regs[1] > 23)
                {
                    errorMsg = "Invalid value for hours: " + regs[1];
                }
            }
            if(!errorMsg && regs[2] > 59)
            {
                errorMsg = "Invalid value for minutes: " + regs[2];
            }
            }
            else
            {
                errorMsg = "Invalid time format: " + inputvalue;
            }
        }

        if(errorMsg != "")
        {
            //console.log(errorMsg);
            //field.focus();
            $scope.time = '';
            return false;
        }
        return true;
    };

角度.module（'abc'）。指令（'timeOnly'，function（）{
返回{
要求：'ngModel'，
链接：函数（范围、元素、属性、模型控制）{
modelCtrl.$parsers.push（函数（inputValue）{
var transformedInput=inputValue？inputValue.replace（/[^\d://g'，）：null；
if（transformedInput！=输入值）{
modelCtrl.$setViewValue（transformedInput）；
modelCtrl.$render（）；
}
返回转换输入；
});
}
};
});
$scope.validateHmm=函数（inputField）
{
var errorMsg=“”；
var regs=''；
//正则表达式以匹配所需的时间格式
var re=/^（\d{1,2}）：（\d{2}）？$/；
var inputvalue=$scope.time；
如果（输入值！=''）
{
if（regs=inputvalue.match（re））
{
if（regs[4]）
{
//12小时时间格式，上午/下午
if（regs[1]<1 | | regs[1]>12）
{
errorMsg=“小时值无效：”+regs[1]；
}
}
其他的
{
如果（regs[1]>23）
{
errorMsg=“小时值无效：”+regs[1]；
}
}
如果（！errorMsg&®s[2]>59）
{
errorMsg=“分钟值无效：”+regs[2]；
}
}
其他的
{
errorMsg=“时间格式无效：”+inputvalue；
}
}
如果（errorMsg！=“”）
{
//console.log（errorMsg）；
//field.focus（）；
$scope.time=''；
返回false；
}
返回true；
};

试试这种方法

<input type="time" id="exampleInput" name="input" ng-model="example.value"
       placeholder="HH:mm:ss" min="08:00:00" max="17:00:00" required />


 <span class="error" ng-show="myForm.input.$error.time">
         Not a valid date!</span>
   </div>

不是有效日期！

这是你的电话号码

这是我们的例子