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版)
Nov 19 Javascript
IE本地存储userdata的一个bug说明
Jul 01 Javascript
事件冒泡是什么如何用jquery阻止事件冒泡
Mar 20 Javascript
对jquery的ajax进行二次封装以及ajax缓存代理组件:AjaxCache详解
Apr 11 Javascript
全面解析jQuery $(document).ready()和JavaScript onload事件
Jun 08 Javascript
springMVC + easyui + $.ajaxFileUpload实现文件上传注意事项
Apr 23 Javascript
动态创建Angular组件实现popup弹窗功能
Sep 15 Javascript
详解基于vue-cli3.0如何构建功能完善的前端架子
Oct 09 Javascript
在Vue项目中取消ESLint代码检测的步骤讲解
Jan 27 Javascript
webpack4.0+vue2.0利用批处理生成前端单页或多页应用的方法
Jun 28 Javascript
vue 插槽简介及使用示例
Nov 19 Vue.js
vue使用过滤器格式化日期
Jan 20 Vue.js
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 flock 文件锁详细介绍
2012/12/29 PHP
配置php网页显示各种语法错误
2013/09/23 PHP
PHP实现的sqlite数据库连接类
2014/12/12 PHP
PHP用continue跳过本次循环中剩余代码的注意点
2017/06/27 PHP
基于jQuery的树控件实现代码(asp.net+json)
2010/07/11 Javascript
jquery中focus()函数实现当对象获得焦点后自动把光标移到内容最后
2013/09/29 Javascript
浅谈JavaScript中指针和地址
2015/07/26 Javascript
快速学习AngularJs HTTP响应拦截器
2015/12/31 Javascript
Jquery uploadify上传插件使用详解
2016/01/13 Javascript
js 动态添加元素(div、li、img等)及设置属性的方法
2016/07/19 Javascript
NodeJS与HTML5相结合实现拖拽多个文件上传到服务器的实现方法
2016/07/26 NodeJs
jq实现左滑显示删除按钮,点击删除实现删除数据功能(推荐)
2016/08/23 Javascript
vue中用动态组件实现选项卡切换效果
2017/03/25 Javascript
将Sublime Text 3 添加到右键中的简单方法
2017/12/12 Javascript
angular4 获取wifi列表中文显示乱码问题的解决
2018/10/20 Javascript
vue使用el-upload上传文件及Feign服务间传递文件的方法
2019/03/15 Javascript
vue实现tab栏点击高亮效果
2020/08/19 Javascript
解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题
2020/09/02 Javascript
JavaScript日期库date-fn.js使用方法解析
2020/09/09 Javascript
[50:24]VGJ.S vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python类的基础入门知识
2008/11/24 Python
Python中尝试多线程编程的一个简明例子
2015/04/07 Python
python基于itchat实现微信群消息同步机器人
2017/02/27 Python
Django实现组合搜索的方法示例
2018/01/23 Python
pandas apply 函数 实现多进程的示例讲解
2018/04/20 Python
Python实现的文本对比报告生成工具示例
2018/05/22 Python
python3代码中实现加法重载的实例
2020/12/03 Python
英国最大的独立家具零售商:Furniture Village
2016/09/06 全球购物
新加坡第一大健康与美容零售商:屈臣氏新加坡(Watsons Singapore)
2020/12/11 全球购物
一些Unix笔试题和面试题
2013/01/22 面试题
师范学院毕业生求职信范文
2013/12/26 职场文书
勤奋学习演讲稿
2014/05/10 职场文书
竞选学委演讲稿
2014/09/13 职场文书
水利局群众路线专题民主生活会发言材料
2014/09/21 职场文书
大学学生个人总结
2015/02/15 职场文书
MySQL安装后默认自带数据库的作用详解
2021/04/27 MySQL