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实现固定顶部导航效果(仿蘑菇街)
Mar 21 Javascript
javascript跟随滚动效果插件代码(javascript Follow Plugin)
Aug 03 Javascript
div模拟滚动条效果示例代码
Oct 16 Javascript
浅谈JS日期(Date)处理函数
Dec 07 Javascript
正则表达式优化JSON字符串的技巧
Dec 24 Javascript
Javascript实现的SHA-256加密算法完整实例
Feb 02 Javascript
AnjularJS中$scope和$rootScope的区别小结
Sep 18 Javascript
jQuery插件HighCharts实现的2D堆条状图效果示例【附demo源码下载】
Mar 14 Javascript
详解通过源码解析Node.js中cluster模块的主要功能实现
May 16 Javascript
利用vue-i18n实现多语言切换效果的方法
Jun 19 Javascript
antd的select下拉框因为数据量太大造成卡顿的解决方式
Oct 31 Javascript
微信小程序实现首页弹出广告
Dec 03 Javascript
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
PHP5/ZendEngine2的改进
2006/10/09 PHP
php 一维数组的循环遍历实现代码
2017/04/10 PHP
Laravel5.4框架中视图共享数据的方法详解
2019/09/05 PHP
jquery select动态加载选择(兼容各种浏览器)
2013/02/01 Javascript
JS获取农历日期具体实例
2013/11/14 Javascript
Redis基本知识、安装、部署、配置笔记
2015/03/05 Javascript
jQuery结合CSS制作动态的下拉菜单
2015/10/27 Javascript
js阻止默认浏览器行为与冒泡行为的实现代码
2016/05/15 Javascript
浅谈jQuery 中的事件冒泡和阻止默认行为
2016/05/28 Javascript
JavaScript 实现的checkbox经典实例分享
2016/10/16 Javascript
Bootstrap Modal遮罩弹出层代码分享
2016/11/21 Javascript
jQuery插件jquery.kxbdmarquee.js实现无缝滚动效果
2017/02/15 Javascript
JavaScript正则获取地址栏中参数的方法
2017/03/02 Javascript
Iphone手机、安卓手机浏览器控制默认缩放大小的方法总结(附代码)
2017/08/18 Javascript
微信小程序switch组件使用详解
2018/01/31 Javascript
Vue Router的懒加载路径的解决方法
2018/06/21 Javascript
详解vue使用$http服务端收不到参数
2019/04/19 Javascript
使用Layui搭建后台管理界面的操作方法
2019/09/20 Javascript
layui: layer.open加载窗体时出现遮罩层的解决方法
2019/09/26 Javascript
微信小程序中的列表切换功能实例代码详解
2020/06/09 Javascript
Vue使用Three.js加载glTF模型的方法详解
2020/06/14 Javascript
IDEA配置jQuery, $符号不再显示黄色波浪线的问题
2020/10/09 jQuery
python实现学生管理系统
2018/01/11 Python
Python爬虫常用库的安装及其环境配置
2018/09/19 Python
python实现任意位置文件分割的实例
2018/12/14 Python
Django框架中间件(Middleware)用法实例分析
2019/05/24 Python
python实现的发邮件功能示例
2019/09/11 Python
python sklearn常用分类算法模型的调用
2019/10/16 Python
python实现人机猜拳小游戏
2020/02/03 Python
HMV日本官网:全球知名的音乐、DVD和电脑游戏零售巨头
2016/08/13 全球购物
STP协议的主要用途是什么?为什么要用STP
2012/12/20 面试题
民主评议党员总结
2014/10/20 职场文书
2014年综合治理工作总结
2014/11/20 职场文书
2014年领班工作总结
2014/11/25 职场文书
2016学习全国教书育人楷模先进事迹心得体会
2016/01/21 职场文书
A22国内电台短波广播频率表
2022/05/10 无线电