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 $.each的用法说明
Mar 22 Javascript
javascript XMLHttpRequest对象全面剖析
Apr 24 Javascript
jquery 实现密码框的显示与隐藏示例代码
Sep 18 Javascript
三种取消选中单选框radio的方法
Sep 09 Javascript
JS实现不规则TAB选项卡效果代码
Sep 16 Javascript
基于JavaScript将表单序列化类型的数据转化成对象的处理(允许对象中包含对象)
Dec 28 Javascript
ES6中如何使用Set和WeakSet
Mar 10 Javascript
JavaScipt选取文档元素的方法(推荐)
Aug 05 Javascript
解决webpack+Vue引入iView找不到字体文件的问题
Sep 28 Javascript
node.js微信小程序配置消息推送的实现
Feb 13 Javascript
js实现右键弹出自定义菜单
Sep 08 Javascript
在vue中获取wangeditor的html和text的操作
Oct 23 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
Yii框架获取当前controlle和action对应id的方法
2014/12/03 PHP
PHP判断是否为空的几个函数对比
2015/04/21 PHP
php类的自动加载操作实例详解
2016/09/28 PHP
PHP自定义序列化接口Serializable用法分析
2017/12/29 PHP
PHP实现数组和对象的相互转换操作示例
2019/03/20 PHP
ExtJS[Desktop]实现图标换行示例代码
2013/11/17 Javascript
jQuery filter函数使用方法
2014/05/19 Javascript
nodejs教程之环境安装及运行
2014/11/21 NodeJs
js变形金刚文字特效代码分享
2015/08/20 Javascript
基于zepto的移动端轻量级日期插件--date_picker
2016/03/04 Javascript
使用jquery.form.js实现图片上传的方法
2016/05/05 Javascript
nodeJS实现简单网页爬虫功能的实例(分享)
2017/06/08 NodeJs
浅谈JS获取元素的N种方法及其动静态讨论
2017/08/25 Javascript
JavaScript门面模式详解
2017/10/19 Javascript
React中的refs的使用教程
2018/02/13 Javascript
详解angularjs跨页面传参遇到的一些问题
2018/11/01 Javascript
微信小程序实现点赞、取消点赞功能
2018/11/02 Javascript
vue实现弹幕功能
2019/10/25 Javascript
js实现点击烟花特效
2020/10/14 Javascript
[01:07:19]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第一场 1月19日
2021/03/11 DOTA
python获取局域网占带宽最大3个ip的方法
2015/07/09 Python
Python实现点阵字体读取与转换的方法
2019/01/29 Python
python覆盖写入,追加写入的实例
2019/06/26 Python
python3 sleep 延时秒 毫秒实例
2020/05/04 Python
Pytorch 卷积中的 Input Shape用法
2020/06/29 Python
pycharm Tab键设置成4个空格的操作
2021/02/26 Python
CSS3中的5个有趣的新技术
2009/04/02 HTML / CSS
NEW LOOK官网:英国时装零售巨头之一,快时尚品牌
2017/01/11 全球购物
廉价连衣裙和婚纱礼服在线销售:Tbdress
2019/02/28 全球购物
怎样从/向数据文件读/写结构
2014/11/23 面试题
新员工培训个人的自我评价
2013/10/09 职场文书
ktv中秋节活动方案
2014/01/30 职场文书
幼儿园毕业园长感言
2014/02/24 职场文书
大一新生学期自我评价
2014/04/09 职场文书
放弃继承权公证书
2015/01/23 职场文书
MySQL之MyISAM存储引擎的非聚簇索引详解
2022/03/03 MySQL