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精华代码集
Jan 24 Javascript
Javascript(AJAX)解析XML的代码(兼容FIREFOX/IE)
Jul 11 Javascript
如何用JavaScript定义一个类
Sep 12 Javascript
有关easyui-layout中的收缩层无法显示标题的解决办法
May 10 Javascript
JS声明式函数与赋值式函数实例分析
Dec 13 Javascript
js实现省份下拉菜单效果
Feb 15 Javascript
JS实现的自动打字效果示例
Mar 10 Javascript
详解使用vue实现tab 切换操作
Jul 03 Javascript
jQuery选择器_动力节点Java学院整理
Jul 05 jQuery
p5.js绘制旋转的正方形
Oct 23 Javascript
js 数据类型判断的方法
Dec 03 Javascript
js定时器出现第一次延迟的原因及解决方法
Jan 04 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 nl2br()格式化输出的详解
2013/06/05 PHP
php获取淘宝分类id示例
2014/01/16 PHP
利用“多说”制作留言板、评论系统
2015/07/14 PHP
joomla数据库操作示例代码
2016/01/06 PHP
php的优点总结 php有哪些优点
2019/07/19 PHP
JQuery.uploadify 上传文件插件的使用详解 for ASP.NET
2010/01/22 Javascript
这些年、我收集的JQuery代码小结
2012/08/01 Javascript
jquery无缝向上滚动实现代码
2013/03/29 Javascript
解析JavaScript中点号“.”的多义性
2013/12/02 Javascript
js实现精确到毫秒的倒计时效果
2016/08/05 Javascript
js下载文件并修改文件名
2017/05/08 Javascript
浅谈Node异步编程的机制
2017/10/18 Javascript
JavaScript 高性能数组去重的方法
2018/09/20 Javascript
微信sdk实现禁止微信分享(使用原生php实现)
2019/11/15 Javascript
vue用elementui写form表单时,在label里添加空格操作
2020/08/13 Javascript
Python远程桌面协议RDPY安装使用介绍
2015/04/15 Python
使用python实现rsa算法代码
2016/02/17 Python
python中abs&map&reduce简介
2018/02/20 Python
Django中的CBV和FBV示例介绍
2018/02/25 Python
一看就懂得Python的math模块
2018/10/21 Python
Python如何在单元测试中给对象打补丁
2020/08/03 Python
CSS3弹性盒模型开发笔记(三)
2016/04/26 HTML / CSS
你正在寻找的CSS3 动画技术
2011/07/27 HTML / CSS
CSS3 实现发光边框特效
2020/11/11 HTML / CSS
安纳塔拉酒店度假村及水疗官方网站:Anantara Hotel
2016/08/25 全球购物
英国著名的小众美容品牌网站:Alyaka
2017/08/08 全球购物
迪卡侬荷兰官网:Decathlon荷兰
2017/10/29 全球购物
北欧最好的童装网上商店:Babyshop
2019/09/15 全球购物
Shopee菲律宾:在线购买和出售
2019/11/25 全球购物
各营销点岗位职责范本
2014/03/05 职场文书
小学优秀教育工作者事迹材料
2014/05/09 职场文书
三八节标语
2014/06/27 职场文书
五好家庭申报材料
2014/12/20 职场文书
单位考核鉴定意见
2015/06/05 职场文书
Python中Cookies导出某站用户数据的方法
2021/05/17 Python
Nginx的基本概念和原理
2022/03/21 Servers