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 相关文章推荐
一些经常会用到的Javascript检测函数
May 31 Javascript
jQuery的链式调用浅析
Dec 03 Javascript
javascript读写XML实现广告轮换(兼容IE、FF)
Aug 09 Javascript
jquery动态改变onclick属性导致失效的问题解决方法
Dec 04 Javascript
JavaScript fontcolor方法入门实例(按照指定的颜色来显示字符串)
Oct 17 Javascript
JS控制div跳转到指定的位置的几种解决方案总结
Nov 05 Javascript
基于D3.js实现时钟效果
Jul 17 Javascript
微信小程序实现保存图片到相册功能
Nov 30 Javascript
Echarts动态加载多条折线图的实现代码
May 24 Javascript
浅谈vuex为什么不建议在action中修改state
Feb 02 Javascript
vue 插槽简介及使用示例
Nov 19 Vue.js
什么是SOLID
Mar 24 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
完美实现GIF动画缩略图的php代码
2011/01/02 PHP
php curl模拟post提交数据示例
2013/12/31 PHP
PHP彩蛋信息介绍和阻止泄漏的方法(隐藏功能)
2014/08/06 PHP
浅谈本地WAMP环境的搭建
2015/05/13 PHP
Zend Framework实现Zend_View集成Smarty模板系统的方法
2016/03/05 PHP
JavaScript 解析读取XML文档 实例代码
2009/07/07 Javascript
js 自定义个性下拉选择框示例
2013/08/20 Javascript
原生js实现图片层叠轮播切换效果
2016/02/02 Javascript
NodeJS连接MongoDB数据库时报错的快速解决方法
2016/05/13 NodeJs
JQuery的attr 与 val区别
2016/06/12 Javascript
微信小程序  简单实例(阅读器)的实例开发
2016/09/29 Javascript
JS实现简易刻度时钟示例代码
2017/03/11 Javascript
用javascript获取任意颜色的更亮或更暗颜色值示例代码
2017/07/21 Javascript
Vue.js学习笔记之常用模板语法详解
2017/07/25 Javascript
JavaSctit 利用FileReader和滤镜上传图片预览功能
2017/09/05 Javascript
NodeJs项目中关闭ESLint的方法
2018/08/09 NodeJs
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
2019/02/15 jQuery
Layui数据表格 前后端json数据接收的方法
2019/09/19 Javascript
Vue引入Stylus知识点总结
2020/01/16 Javascript
Javascript新手入门之字符串拼接与变量的应用
2020/12/03 Javascript
python使用PyGame绘制图像并保存为图片文件的方法
2015/04/24 Python
requests和lxml实现爬虫的方法
2017/06/11 Python
Python实现k-means算法
2018/02/23 Python
Django ORM 自定义 char 类型字段解析
2019/08/09 Python
Python实现点云投影到平面显示
2020/01/18 Python
关于Tensorflow使用CPU报错的解决方式
2020/02/05 Python
解决CSS3的opacity属性带来的层叠顺序问题
2016/05/09 HTML / CSS
英国复古和经典球衣网站:Vintage Football Shirts
2018/10/05 全球购物
Fossil加拿大官网:化石手表、手袋、首饰及配饰
2019/04/23 全球购物
校园奶茶店创业计划书
2014/01/23 职场文书
高中毕业自我评价
2014/02/08 职场文书
信电学院毕业生自荐书
2014/05/24 职场文书
2014年物流工作总结
2014/11/25 职场文书
酒吧七夕情人节宣传语
2015/11/24 职场文书
用Python写一个简易版弹球游戏
2021/04/13 Python
JS前端可视化canvas动画原理及其推导实现
2022/08/05 Javascript