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.LazyLoad.js修正版下载,实现图片延迟加载插件
Mar 12 Javascript
js如何取消事件冒泡
Sep 23 Javascript
javascript与cookie 的问题详解
Nov 11 Javascript
jquery.validate的使用说明介绍
Nov 12 Javascript
js用拖动滑块来控制图片大小的方法
Feb 27 Javascript
JavaScript使用function定义对象并调用的方法
Mar 23 Javascript
微信小程序开发之录音机 音频播放 动画实例 (真机可用)
Dec 08 Javascript
jQuery validate 验证radio实例
Mar 01 Javascript
ES6正则表达式扩展笔记
Jul 25 Javascript
es6中的解构赋值、扩展运算符和rest参数使用详解
Sep 28 Javascript
Vue中render方法的使用详解
Jan 26 Javascript
OpenLayers3实现图层控件功能
Sep 25 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
人族 Terran 基本策略
2020/03/14 星际争霸
DC最新动画电影:《战争之子》为何内容偏激,毁了一个不错的漫画
2020/04/09 欧美动漫
Win2003+apache+PHP+SqlServer2008 配置生产环境
2014/07/29 PHP
php的api数据接口书写实例(推荐)
2016/09/22 PHP
PHP+Ajax 检测网络是否正常实例详解
2016/12/16 PHP
PHP调试及性能分析工具Xdebug详解
2017/02/09 PHP
PHP下载大文件失败并限制下载速度的实例代码
2019/05/10 PHP
Javascript注入技巧
2007/06/22 Javascript
纯CSS打造的导航菜单(附jquery版)
2010/08/07 Javascript
利用Javascript判断操作系统的类型实现不同操作系统下的兼容性
2013/01/29 Javascript
js处理json以及字符串的比较等常用操作
2013/09/08 Javascript
使用npm发布Node.JS程序包教程
2015/03/02 Javascript
jQuery实现可展开折叠的导航效果示例
2016/09/12 Javascript
javascript中setAttribute兼容性用法分析
2016/12/12 Javascript
详解使用angular-cli发布i18n多国语言Angular应用
2017/05/20 Javascript
vue获取input输入值的问题解决办法
2017/10/17 Javascript
图片加载完成再执行事件的实例
2017/11/16 Javascript
vue vuex vue-rouert后台项目——权限路由(适合初学)
2017/12/29 Javascript
JS实现同一DOM元素上onClick事件与onDblClick事件并存的解决方法
2018/06/07 Javascript
使用Node搭建reactSSR服务端渲染架构
2018/08/30 Javascript
vue实现打地鼠小游戏
2020/08/21 Javascript
JavaScript实现点击切换功能
2021/01/27 Javascript
[01:07:34]DOTA2-DPC中国联赛定级赛 RNG vs Aster BO3第二场 1月9日
2021/03/11 DOTA
python Socket之客户端和服务端握手详解
2017/09/18 Python
Python实现的根据IP地址计算子网掩码位数功能示例
2018/05/23 Python
Python实现线性插值和三次样条插值的示例代码
2019/11/13 Python
Django更新models数据库结构步骤
2020/04/01 Python
Python捕获异常堆栈信息的几种方法(小结)
2020/05/18 Python
浅谈OpenCV中的新函数connectedComponentsWithStats用法
2020/07/05 Python
python中plt.imshow与cv2.imshow显示颜色问题
2020/07/16 Python
一款纯css3实现的鼠标经过按钮特效教程
2014/11/09 HTML / CSS
Servlet如何得到服务器的信息
2015/12/22 面试题
师范毕业生自我鉴定
2014/01/15 职场文书
个人党性剖析材料
2014/02/03 职场文书
React如何创建组件
2021/06/27 Javascript
GO语言异常处理分析 err接口及defer延迟
2022/04/14 Golang