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 相关文章推荐
仿新浪微博登陆邮箱提示效果的js代码
Aug 02 Javascript
浅谈JavaScript中Date(日期对象),Math对象
Feb 05 Javascript
使用jquery组件qrcode生成二维码及应用指南
Feb 22 Javascript
基于Jquery和html5的7款个性化地图插件
Nov 17 Javascript
谈一谈js中的执行环境及作用域
Mar 30 Javascript
Angularjs+bootstrap+table多选(全选)支持单击行选中实现编辑、删除功能
Mar 27 Javascript
iscroll.js滚动加载实例详解
Jul 18 Javascript
解决JSON.stringify()自动将中文转译成unicode的问题
Jan 05 Javascript
JS实现简单获取最近7天和最近3天日期的方法
Apr 18 Javascript
JavaScript获取用户所在城市及地理位置
Apr 21 Javascript
webpack打包多页面的方法
Nov 30 Javascript
解决VUE项目localhost端口服务器拒绝连接,只能用127.0.0.1的问题
Aug 14 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
坏狼的PHP学习教程之第1天
2008/06/15 PHP
解析wamp5下虚拟机配置文档
2013/06/27 PHP
PHP针对JSON操作实例分析
2015/01/12 PHP
PHP使用内置dir类实现目录遍历删除
2015/03/31 PHP
学习php设计模式 php实现访问者模式(Visitor)
2015/12/07 PHP
PHP实现的XML操作类【XML Library】
2016/12/29 PHP
JavaScript高级程序设计 DOM学习笔记
2011/09/10 Javascript
使用nodejs开发cli项目实例
2015/06/03 NodeJs
JavaScript数组对象赋值用法实例
2015/08/04 Javascript
jQuery基于xml格式数据实现模糊查询及分页功能的方法
2016/12/25 Javascript
微信小程序 radio单选框组件详解及实例代码
2017/01/10 Javascript
node.js(express)中使用Jcrop进行图片剪切上传功能
2017/04/21 Javascript
使用VUE+iView+.Net Core上传图片的方法示例
2019/01/04 Javascript
Vue实现手机扫描二维码预览页面效果
2020/05/28 Javascript
[03:24]2014DOTA2国际邀请赛 神秘商店生意火爆
2014/07/18 DOTA
Python安装官方whl包和tar.gz包的方法(推荐)
2017/06/04 Python
Python编程产生非均匀随机数的几种方法代码分享
2017/12/13 Python
浅谈Django学习migrate和makemigrations的差别
2018/01/18 Python
python语言中with as的用法使用详解
2018/02/23 Python
python实现简单登陆流程的方法
2018/04/22 Python
Python 解析xml文件的示例
2020/09/29 Python
python 基于opencv操作摄像头
2020/12/24 Python
html5中的input新属性range使用记录
2014/09/05 HTML / CSS
实例讲解使用HTML5 Canvas绘制阴影效果的方法
2016/03/25 HTML / CSS
黄色火烈鸟:De Gele Flamingo
2019/03/18 全球购物
护士检查书
2014/01/17 职场文书
消防器材管理制度
2014/01/28 职场文书
珍惜水资源建议书
2014/03/12 职场文书
公休请假条
2014/04/11 职场文书
实践单位评语
2014/04/26 职场文书
网吧消防安全责任书
2014/07/29 职场文书
活动简报范文
2015/07/22 职场文书
年中了,该如何写好个人述职报告?
2019/07/02 职场文书
2019年度政务公开考核工作总结模板
2019/11/11 职场文书
MySQL系列之二 多实例配置
2021/07/02 MySQL
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
2022/04/06 Vue.js