使用 ng-change、AngularJS 进行日期输入验证

2024-04-07

我正在使用 AngularJS 和AngularJS 引导程序 http://angular-ui.github.io/bootstrap/在我的页面中。我有一个日期选择器指令,如下所示:

    <div class="form-group {{dateStatus.class}}">
        <p class="input-group">
            <input type="text" id="inpDate" class="form-control" 
                   datepicker-popup="dd-MMMM-yyyy" ng-model="task.date" 
                   is-open="datePickerStatus.isOpen" min-date="minDate" 
                   datepicker-options="dateOptions" ng-required="true" 
                   close-text="Close" placeholder="Due date" 
                   ng-change="checkDateValidity()"
            />
            <span class="input-group-btn">
                <button type="button" class="btn btn-default" 
                        ng-click="openDatePicker($event)"
                >
                    <i class="glyphicon glyphicon-calendar"></i>
                </button>
            </span>
        </p>
    </div>

为了验证日期输入,在我的控制器中我有以下函数:

        $scope.checkDateValidity = function(){
        var date,
            isValid,
            taskDate;
        taskDate = $scope.task.date;
        date = new Date(taskDate);
        isValid = !isNaN(date);
        if(isValid) {
            $scope.addButtonState.isOk = true;
            $scope.dateStatus.class = '';
        }
        else{
            $scope.addButtonState.isOk = false;
            $scope.dateStatus.class = 'has-error';
        }
    }

检查插入的日期是否有效一切正常,但问题是当日期输入留空(或从有效状态更改为空白)时 我也希望它是可以接受的,但是由于空输入和无效日期都是undefined我不知道如何在案件之间声明。

我还想到直接读取输入文本,如下所示:

document.getElementById('inpDate').value

但是当值更改时会触发 ng-change ,并且我留下了以前的值,现在没用了......

感谢您的时间和回复。


更好的验证方法是使用指令添加验证规则。

.directive("validateDate", function() {
     return {
         require: 'ngModel',
         link: function(scope, elm, attrs, ctrl) {
             ctrl.$validators.validateDate = function(modelValue, viewValue) {
                 if(!isNaN(modelValue) || ctrl.$isEmpty(modelValue)){
                     return true;
                 }
                 return false;
             };
         }
     };
 })

那么你只需要添加validate-date到输入标记,如果输入为 !isNaN(当日期为数字或为空时),验证会将输入标记为有效

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用 ng-change、AngularJS 进行日期输入验证 的相关文章

随机推荐

  • 在 Rails 模型中一起验证日期和时间字段

    编辑 如果下面的问题看起来有点 广泛 总结是我只想在模型中组合日期字段和可选时间字段 纯粹是为了使用日期验证器验证它 但我不能当我传入一个字符串作为时间时 让我的测试正确失败 编辑2 由于我仍在努力寻找一种将日期对象与时间对象连接起来以进行
  • SyntaxError:无法在没有模块的情况下使用 import 语句,TypeError [ERR_UNKNOWN_FILE_EXTENSION]:Catch 22

    我一直在使用 Node js 时遇到问题 这是相关代码 app ts const express require express const auth require service auth import Request Response
  • 如何在Magento的view.phtml中显示标签产品

    我创建了新主题并使用它们来创建产品 在查看页面中 我没有看到产品标签 我默认查看 view pthml 并知道中的标签 echo this gt getChildHtml product additional data 我的 view ph
  • 如何在java中使用正则表达式非捕获组进行字符串替换

    我有一个改变的要求AssemblyVersion在新的构建上 我用java代码来做string replaceAll regexPattern updatedString 此代码适用于正常的正则表达式模式 但我无法在此模式中使用非捕获组 我
  • 如何检查 JSP 页面上的变量?

    我有一组工作页面 想要在 JSP 页面上的断点处检查变量 不幸的是 变量的上下文菜单不会像在 Java 文件中那样显示正常的 检查 监视 选项 有任何想法吗 这是一个对我有用的解决方案 在 Eclipse 中打开 显示 选项卡视图 窗口 g
  • “通常的算术转换”和“整数提升”是同一回事吗?

    通常的算术转换 和 整数提升 是同一回事吗 我读过 通常的算术转换 用于使表达式的操作数具有相同的类型 而 整数提升 用于提升小于的类型int to int 但在MSDN https msdn microsoft com en us lib
  • Bitbucket 与 Github 的优缺点比较 [关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 Disclaimer This is a subjective question Please follow relevant guidelin
  • 可以在 Yii2 中更改动作类吗?

    是否可以更改动作类 http www yiiframework com doc 2 0 yii base inlineaction html Yii2以某种方式使用 类似于如何在配置文件中设置许多其他组件的类 我想扩展这个课程 这样我就可以
  • 如何在iOS SDK中删除两个字符串中的共同字母? [关闭]

    Closed 这个问题需要细节或清晰度 help closed questions 目前不接受答案 如何删除两个字符串中的常见字母并使用剩余的唯一字母生成新字符串 例如 String 1 Optimus Prime String 2 Dej
  • 如何使用 kotlin 显示在 recyclerview 中选择的单个项目

    我们如何标记单个项目被选中Recyclerview使用科特林 当我选择一个项目并单击其他项目时 应取消选择之前选择的项目 这是我在 kotlin 中的适配器类 class ListAdapter var context Context va
  • notificationDataSetChanged() 不刷新可扩展列表视图

    我在用Expandable ListView其中的数据通过填充Sqlite数据库 我已经提供了从中删除群组的选项ExpandableListView它实际上删除了相应的row在数据库中 但是该活动不会刷新 并且删除的 案例 是可见的 直到人
  • 使用 spring.NET 配置静态属性

    使用 spring NET 配置以下类的最佳实践是什么 using System Collections Generic using Edu3 DTOModel namespace Edu3 Data SubsonicProvider Re
  • distanceTo 返回什么距离?

    是否考虑了海拔变化 我的意思是 如果我从这个三角形的左顶点开始并在右上顶点结束 它返回距离a还是b double distanceInMetersFloat initialPosition distanceTo finalPosition
  • 通过键与字典项绑定

    假设我有一些字典 我想将该字典中的项目绑定到某些控件 并且我想通过项目键进行绑定 public partial class Window1 Window public Window1 InitializeComponent Dictiona
  • angerlySetInnerHTML 和

    我的页面需要本地化 我用的是gettext 我的i18n 函数返回翻译后的字符串并替换 s带有提供参数的符号 据我所知 我不能 危险的设定 一个 JSX 元素 但是我需要插入打开和关闭标签 我无法将字符串分成多个部分 因为后端为我提供了这样
  • 如何知道图像是 RGB 还是 BGR 格式?

    有没有办法提前知道用作系统输入的图像是 RGB 还是 BGR 格式 我正在使用 OpenCV 和 java API 我想将输入图像转换为灰度或 L a b 颜色空间 但在 OpenCV 中 您必须首先指定要转换的图像是 RGB 还是 BGR
  • Ruby 的“open_uri”是否在读取或失败后可靠地关闭套接字?

    我一直在使用open uri拉下 ftp 路径作为数据源一段时间 但突然发现我几乎连续不断地收到 530 抱歉 已连接允许的最大客户端数 95 我不确定我的代码是否有问题 或者是否是其他人正在访问服务器 不幸的是 我似乎无法真正确定谁有问题
  • 带值的 NSArray

    如何创建一个带有填充值的 NSArray 也就是说 NSArray name NSArray alloc insert these values raju biju ramu 使用 NSArray initWithObjects 方法 记住
  • 验证 Rails 中的参数

    在我的 Rails 应用程序中 我想验证filter and post type params 两者都是可选的 但如果它们存在 则它们必须具有一个值 并且必须具有与有效值数组中的一个相匹配的值 在我的控制器中 我有两种检查它们的方法 def
  • 使用 ng-change、AngularJS 进行日期输入验证

    我正在使用 AngularJS 和AngularJS 引导程序 http angular ui github io bootstrap 在我的页面中 我有一个日期选择器指令 如下所示 div class p class input grou