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验证用户输入的字符串是否为日期时间，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • 在JS中如何把毫秒转换成规定的日期时间格式实例

    在JS中如何把毫秒转换成规定的日期时间格式实例

    最近做的一个项目,从后台查询到日期数据传到前台JS中遍历之后显示的是以"14"开头的毫秒数,刚开始想用"simpleDateFormat"类处理,结果显示都不显示了.后来查了一下资料,感觉其实很简单,下面 把自己的方法分享给大家以供参考. 1.显示的毫秒数 2.处理之前的样式 3.处理之后的样式 Date.prototype.toLocaleString = function() { return this.getFullYear() + "-"

  • JavaScript实现设置默认日期范围为最近40天的方法分析

    JavaScript实现设置默认日期范围为最近40天的方法分析

    本文实例讲述了JavaScript实现设置默认日期范围为最近40天的方法.分享给大家供大家参考,具体如下: 前面文章<JavaScript输出所选择起始与结束日期的方法>中的例子实现了选择日期,然后把选择的日期输出,这么一个功能. 不过实际项目中,测试人员说客户的需求是点击进入页面后,自动查询最近40天的数据. 想了想,实现的原理就是在页面加载之后,调用一个JavaScript函数设置日期,相比上一篇文章,除了修改了部分格式,还增加了onload函数. 另外,虽然把日期转为字符串可以用标准函数

  • JavaScript输出所选择起始与结束日期的方法

    JavaScript输出所选择起始与结束日期的方法

    本文实例讲述了JavaScript输出所选择起始与结束日期的方法.分享给大家供大家参考,具体如下: 一直在用公司的报表工具做报表,报表里最常用的查询条件就是开始日期.结束日期. 自己会一点html和js,于是就想用html+JavaScript来实现选择查询日期,以及做出相应. 实现之后,觉得这个还是比较简单的,N年前学的html和javascript,总算是派上用场了,人人都可以开发网页. 这个代码要在谷歌的chrome浏览器中,日期选择才能有效果(代码中的input元素Type属性值date

  • JS简单获取当前日期时间的方法(如：2017-03-29 11:41:10 星期四)

    JS简单获取当前日期时间的方法(如：2017-03-29 11:41:10 星期四)

    本文实例讲述了JS简单获取当前日期时间的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>JS日期时间</title> <meta http-equiv

  • js日期范围初始化得到前一个月日期的方法

    js日期范围初始化得到前一个月日期的方法

    本文实例讲述了js日期范围初始化得到前一个月日期的方法.分享给大家供大家参考.具体分析如下: 今天做时间范围的初始化设定,开始时间是当前时间的前一个月,终于找到完美的解决方案了. Date.prototype.format = function(format) { var o = { "M+" : this.getMonth() + 1, // month "d+" : this.getDate(), // day "h+" : this.get

  • javascript完美实现给定日期返回上月日期的方法

    本文实例讲述了javascript完美实现给定日期返回上月日期的方法.分享给大家供大家参考,具体如下: 在项目开发中,使用javascript对日期进行处理时,因为在查询中都会有一个初始值,大多都会在当前日期的基础上推一个月,在这种情况下,如果自己写一个,需要考虑的情况较多,在这里给大家分享一下一个比较完善的解决这个问题的方法.供大家参考.例如:给定截止日期enddate=2010-07-31 计算得到开始日期startdate=2010-06-30 这个问题的关键在于对以下几处的考虑: 1.s

  • JS匹配日期和时间的正则表达式示例

    本文实例讲述了JS匹配日期和时间的正则表达式.分享给大家供大家参考,具体如下: //日期的正则表达式 var reg = /^[1-9]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])$/; var regExp = new RegExp(reg); if(!regExp.test(value)){ alert("日期格式不正确,正确格式为:2014-01-01"); return; } //时间的正则表达式 var reg = /^(2

  • JS简单获取当前日期和农历日期的方法

    JS简单获取当前日期和农历日期的方法

    本文实例讲述了JS简单获取当前日期和农历日期的方法.分享给大家供大家参考,具体如下: navCal.js文件如下: today=new Date(); function initArray(){ this.length=initArray.arguments.length for(var i=0;i<this.length;i++) this[i+1]=initArray.arguments[i] } var d=new initArray( "星期日", "星期一&q

  • js获取当前周、上一周、下一周日期

    js获取当前周、上一周、下一周日期

    效果图: 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html > <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>日历操作</title> <scrip

  • 原生js实现日期计算器功能

    本文实例为大家分享了日期计算器的具体实现代码,供大家参考,具体内容如下 日期计算器html代码片段: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>日期计算器</title> <script type="text/javascript" src="date_calc.

  • JS简单获取日期相差天数的方法

    本文实例讲述了JS简单获取日期相差天数的方法.分享给大家供大家参考,具体如下: <html> <head> <meta charset="utf-8"> <title>JS日期相差天数</title> </head> <body> <SCRIPT LANGUAGE="JavaScript"> var s1 = '2016-05-12'; s1 = new Date(s1.

  • JavaScript获取一个范围内日期的方法

    本文实例讲述了JavaScript获取一个范围内日期的方法.分享给大家供大家参考.具体分析如下: 指定开始和结束时间,范围该范围内的所有日期放入数组 Date.prototype.addDays = function(days) { var dat = new Date(this.valueOf()); dat.setDate(dat.getDate() + days); return dat; }; function getDates(startDate, stopDate) { var da

  • Json日期格式问题的四种解决方法(超详细)

    Json日期格式问题的四种解决方法(超详细)

    开发中有时候需要从服务器端返回json格式的数据,在后台代码中如果有DateTime类型的数据使用系统自带的工具类序列化后将得到一个很长的数字表示日期数据,如下所示: //设置服务器响应的结果为纯文本格式 context.Response.ContentType = "text/plain"; //学生对象集合 List<Student> students = new List<Student> { new Student(){Name ="Tom&q

随机推荐