Angularjs验证用户输入的字符串是否为日期时间

 更新时间:2017年06月01日 14:15:50   作者:Insus.NET  
这篇文章主要介绍了Angularjs验证用户输入的字符串是否为日期时间,需要的朋友可以参考下

在angularjs中,想在文本框中,验证用户输入的字符串是否为日期时间。

刚开始时,Insus.NET想到的是正则,这只是验证到日期与时间的格式是否正确而已,而对于2月最后一天或是30或是31号,还是无能为力。

因此,Insus.NET想使用angularjs的自定义指令来验证解决此问题。

在ASP.NET MVC的项目中,创建一个控制器,并创建一个Action:

控制器源代码:

using System;
using System.Collections.Generic;
using System.Globalization;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace Insus.NET.Controllers
{
 public class CommonsController : Controller
 {
 public JsonResult ValidateDate(string date)
 {
  object _Data;
  DateTime dt;
  if (DateTime.TryParse(date, out dt))
  {
  _Data = new { result = true };
  }
  else
  {
  _Data = new { result = false };
  }
  return new JsonResult
  {
  Data = _Data,
  ContentEncoding = System.Text.Encoding.UTF8,
  JsonRequestBehavior = JsonRequestBehavior.AllowGet
  };
 }
 }
}

接下来,你可以写Directive了,那是一个js文件:

validateDate的angularjs代码:

airExpressApp.directive('validateDate', function ($http, $q) {
 return {
 restrict: 'AE',
 require: 'ngModel',
 link: function ($scope, element, attributes, ngModelController) {
  ngModelController.$asyncValidators.dataValid = function (modelValue, viewValue) {
  var deferred = $q.defer();
  var obj = {};
  obj.date = modelValue;
  $http({
   method: 'POST',
   url: '/Commons/ValidateDate',
   dataType: 'json',
   headers: {
   'Content-Type': 'application/json; charset=utf-8'
   },
   data: JSON.stringify(obj),
  }).then(function (response) {
   if (ngModelController.$isEmpty(modelValue) || response.data.result) {
   deferred.resolve();
   } else {
   deferred.reject();
   }
  });
  return deferred.promise;
  };
 }
 }
});

html的input应用此angularjs的属性:

 演示:

以上所述是小编给大家介绍的Angularjs验证用户输入的字符串是否为日期时间,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • AngularJS Module方法详解

    AngularJS Module方法详解

    AngularJS中的Module类负责定义应用如何启动,它还可以通过声明的方式定义应用中的各个片段。我们来看看它是如何实现这些功能的
    2015-12-12
  • AngularJS 模块详解及简单实例

    AngularJS 模块详解及简单实例

    本文主要介绍AngularJS 模块,这里帮大家整理了相关资料,详细介绍了AngularJS的基础知识,有需要的朋友可以参考下
    2016-07-07
  • Angular组件间通信的新解决方案详解

    Angular组件间通信的新解决方案详解

    本文通过对比几种Angular组件间的通信方式,给大家介绍了一种新的Angular组件间通信的解决方案,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-08-08
  • Angular中样式绑定解决方案

    Angular中样式绑定解决方案

    这篇文章主要介绍了Angular中样式绑定解决方案,使用ngClass和ngStyle可以进行样式的绑定,本文结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-08-08
  • 使用AngularJS中的SCE来防止XSS攻击的方法

    使用AngularJS中的SCE来防止XSS攻击的方法

    这篇文章主要介绍了使用AngularJS中的SCE来防止XSS攻击的方法,依靠合理地转码为HTML来预防跨站脚本漏洞共计,需要的朋友可以参考下
    2015-06-06
  • 简单说说angular.json文件的使用

    简单说说angular.json文件的使用

    这篇文章主要介绍了简单说说angular.json文件的使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-10-10
  • angular.js 路由及页面传参示例

    angular.js 路由及页面传参示例

    本篇文章主要介绍了angular.js 路由及页面传参示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-02-02
  • 简述AngularJS的控制器的使用

    简述AngularJS的控制器的使用

    这篇文章主要介绍了AngularJS的控制器的使用,文中给出了具体的用于HTML中的对象示例,需要的朋友可以参考下
    2015-06-06
  • AngularJS实现的获取焦点及失去焦点时的表单验证功能示例

    AngularJS实现的获取焦点及失去焦点时的表单验证功能示例

    这篇文章主要介绍了AngularJS实现的获取焦点及失去焦点时的表单验证功能,涉及AngularJS使用ng-blur、ng-focus针对表单事件监听相关操作技巧,需要的朋友可以参考下
    2017-10-10
  • Angular8 简单表单验证的实现示例

    Angular8 简单表单验证的实现示例

    这篇文章主要介绍了Angular8 简单表单验证的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-06-06

最新评论