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 相关文章推荐
Flash+XML滚动新闻代码 无图片 附源码下载
Nov 22 Javascript
Javascript 判断是否存在函数的方法
Jan 03 Javascript
动态获取复选框checkbox选中个数的jquery代码
Jun 25 Javascript
jQuery实现自动滚动到页面顶端的方法
May 22 Javascript
node.js读取文件到字符串的方法
Jun 29 Javascript
javascript实现禁止鼠标滚轮事件
Jul 24 Javascript
jquery+css3问卷答题卡翻页动画效果示例
Oct 26 Javascript
利用select实现年月日三级联动的日期选择效果【推荐】
Dec 13 Javascript
解决微信小程序调用moveToLocation失效问题【超简单】
Apr 12 Javascript
vue 弹窗时 监听手机返回键关闭弹窗功能(页面不跳转)
May 10 Javascript
axios实现文件上传并获取进度
Mar 25 Javascript
vue相同路由跳转强制刷新该路由组件操作
Aug 05 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
全国FM电台频率大全 - 9 上海市
2020/03/11 无线电
php使用strtotime和date函数判断日期是否有效代码分享
2013/12/25 PHP
函数中使用require_once问题深入探讨 优雅的配置文件定义方法推荐
2014/07/02 PHP
Yii2 rbac权限控制操作步骤实例教程
2016/04/29 PHP
php获取'/'传参的值简单方法
2017/07/13 PHP
phpStudy中升级MySQL版本到5.7.17的方法步骤
2017/08/03 PHP
用Javscript实现表单复选框的全选功能
2007/05/25 Javascript
js获取IP和PcName(IE)在vs中可用
2013/08/02 Javascript
一个实用的图片切换支持点击切换和自动轮播
2014/09/09 Javascript
jquery动态加载js/css文件方法(自写小函数)
2014/10/11 Javascript
详解JavaScript逻辑And运算符
2015/12/04 Javascript
JavaScript判断DIV内容是否为空的方法
2016/01/29 Javascript
jQuery的内容过滤选择器学习教程
2016/04/18 Javascript
基于jquery实现三级下拉菜单
2016/05/10 Javascript
深入理解JS继承和原型链的问题
2016/12/17 Javascript
jQuery实现图片滑动效果
2017/03/08 Javascript
JavaScript多态与封装实例分析
2018/07/27 Javascript
nodejs中express入门和基础知识点学习
2018/09/13 NodeJs
vuejs2.0运用原生js实现简单拖拽元素功能
2020/08/21 Javascript
js实现拖拽元素选择和删除
2020/08/25 Javascript
Python 面向对象 成员的访问约束
2008/12/23 Python
Python中threading模块join函数用法实例分析
2015/06/04 Python
Python  pip安装lxml出错的问题解决办法
2017/02/10 Python
Python搭建Keras CNN模型破解网站验证码的实现
2020/04/07 Python
Python自动化之UnitTest框架实战记录
2020/09/08 Python
pycharm进入时每次都是insert模式的解决方式
2021/02/05 Python
阿联酋航空假期:Emirates Holidays
2018/03/20 全球购物
JSP&Servlet技术面试题
2015/05/21 面试题
教师师德教育的自我评价
2013/10/31 职场文书
经理秘书找工作求职信
2013/12/19 职场文书
幼儿园评语大全
2014/04/17 职场文书
银行业务授权委托书
2014/10/10 职场文书
刑事申诉状范文
2015/05/20 职场文书
民间借贷纠纷答辩状
2015/08/03 职场文书
船舶调度指挥系统——助力智慧海事
2022/02/18 无线电
详解Redis的三种常用的缓存读写策略步骤
2022/05/06 Redis