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


Posted in Javascript onJune 01, 2017

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

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

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

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

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

控制器源代码:

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文件:

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

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验证用户输入的字符串是否为日期时间

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

Javascript 相关文章推荐
JQuery 1.3.2以上版本中出现pareseerror错误的解决方法
Jan 11 Javascript
javascript设计模式 接口介绍
Jul 24 Javascript
jQuery获取iframe的document对象的方法
Oct 10 Javascript
javascript截取字符串小结
Apr 28 Javascript
JQuery鼠标移到小图显示大图效果的方法
Jun 10 Javascript
Knockoutjs 学习系列(二)花式捆绑
Jun 07 Javascript
JS常用加密编码与算法实例总结
Dec 22 Javascript
原生JS 购物车及购物页面的cookie使用方法
Aug 21 Javascript
深入浅析Vue中的slots/scoped slots
Apr 03 Javascript
常见的浏览器存储方式(cookie、localStorage、sessionStorage)
May 07 Javascript
用jQuery实现抽奖程序
Apr 12 jQuery
jquery实现拖拽添加元素功能
Dec 01 jQuery
jQuery实现web页面樱花坠落的特效
Jun 01 #jQuery
jquery网页加载进度条的实现
Jun 01 #jQuery
BootStrap selectpicker后台动态绑定数据
Jun 01 #Javascript
JS实现仿饿了么在浏览器标签页失去焦点时网页Title改变
Jun 01 #Javascript
Require.JS中的几种define定义方式示例
Jun 01 #Javascript
关于javascript获取内联样式与嵌入式样式的实例
Jun 01 #Javascript
react-router中的属性详解
Jun 01 #Javascript
You might like
php数组函数序列之array_pop() - 删除数组中的最后一个元素
2011/11/07 PHP
遍历指定目录,并存储目录内所有文件属性信息的php代码
2016/10/28 PHP
PHP PDO数据库操作预处理与注意事项
2019/03/16 PHP
chrome下img加载对height()的影响示例探讨
2014/05/26 Javascript
原生javascript实现图片按钮切换
2015/01/12 Javascript
JavaScript中指定函数名称的相关方法
2015/06/04 Javascript
jQuery实现浮动层随浏览器滚动条滚动的方法
2015/09/22 Javascript
javascript中字体浮动效果的简单实例演示
2015/11/18 Javascript
Vue.js原理分析之observer模块详解
2017/02/17 Javascript
基于ionic实现下拉刷新功能
2018/05/10 Javascript
JQuery Ajax执行跨域请求数据的解决方案
2018/12/10 jQuery
jquery获取img的src值实例介绍
2019/01/16 jQuery
javascript实现雪花飘落效果
2020/08/19 Javascript
[46:27]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#2LGD VS MVP.Phx第一局
2016/03/02 DOTA
Python写的Tkinter程序屏幕居中方法
2015/03/10 Python
Python编程实现的简单Web服务器示例
2017/06/22 Python
深入理解Django的自定义过滤器
2017/10/17 Python
对Python中DataFrame按照行遍历的方法
2018/04/08 Python
python中virtualenvwrapper安装与使用
2018/05/20 Python
python自动发送邮件脚本
2018/06/20 Python
python用pandas数据加载、存储与文件格式的实例
2018/12/07 Python
Ubuntu下Anaconda和Pycharm配置方法详解
2019/06/14 Python
python用match()函数爬数据方法详解
2019/07/23 Python
Python 获取项目根路径的代码
2019/09/27 Python
Python爬虫使用代理IP的实现
2019/10/27 Python
Python垃圾回收机制三种实现方法
2020/04/27 Python
tensorflow实现残差网络方式(mnist数据集)
2020/05/26 Python
利用Python中的Xpath实现一个在线汇率转换器
2020/09/09 Python
localStorage的过期时间设置的方法详解
2018/11/26 HTML / CSS
JD Sports丹麦:英国领先的运动时尚零售商
2020/11/24 全球购物
Java中采用什么结构来捕获、处理异常?各子句的顺序、功能如何
2013/10/07 面试题
邮政员工辞职信
2014/01/16 职场文书
参观接待方案
2014/03/17 职场文书
环保倡议书怎么写
2014/05/16 职场文书
英文求职信范文
2014/05/23 职场文书
2016年妇联“6﹒26国际禁毒日”宣传活动总结
2016/04/05 职场文书