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 相关文章推荐
Prototype使用指南之enumerable.js
Jan 10 Javascript
超简单的jquery的AJAX用法
May 10 Javascript
JavaScript中for-in遍历方式示例介绍
Feb 11 Javascript
javascript去掉代码里面的注释
Jul 24 Javascript
JS代码随机生成姓名、手机号、身份证号、银行卡号
Apr 27 Javascript
javascript十六进制数字和ASCII字符之间的转换方法
Dec 27 Javascript
JS对象是否拥有某属性如何判断
Feb 03 Javascript
微信小程序实现给循环列表添加点击样式实例
Apr 26 Javascript
基于ionic实现下拉刷新功能
May 10 Javascript
JS常见构造模式实例对比分析
Aug 27 Javascript
vue首次赋值不触发watch的解决方法
Sep 11 Javascript
Vue组件模板及组件互相引用代码实例
Mar 11 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使用CURL实现下载文件功能示例
2019/06/03 PHP
jQuery 前的按键判断代码
2010/03/19 Javascript
(跨浏览器基础事件/浏览器检测/判断浏览器)经验代码分享
2013/01/24 Javascript
从JQuery源码分析JavaScript函数的apply方法与call方法
2014/09/25 Javascript
浅谈JavaScript函数节流
2014/12/09 Javascript
原生js与jQuery实现简单的tab切换特效对比
2015/07/30 Javascript
JS基于FileSystemObject创建一个指定路径的TXT文本文件
2015/08/05 Javascript
JS实现iframe自适应高度的方法(兼容IE与FireFox)
2016/06/24 Javascript
JavaScript表单焦点自动切换代码
2016/07/24 Javascript
详解vue-validator(vue验证器)
2017/01/16 Javascript
jQuery插件FusionCharts绘制ScrollColumn2D图效果示例【附demo源码下载】
2017/03/22 jQuery
js实现rem自动匹配计算font-size的示例
2017/11/18 Javascript
vue + webpack如何绕过QQ音乐接口对host的验证详解
2018/07/01 Javascript
基于Vue 2.0 监听文本框内容变化及ref的使用说明介绍
2018/08/24 Javascript
浅析js中mvvm模式实现的原理
2018/10/06 Javascript
Vue之beforeEach非登录不能访问的实现(代码亲测)
2019/07/18 Javascript
vue中使用echarts的示例
2021/01/03 Vue.js
python 获取本机ip地址的两个方法
2013/02/25 Python
Python Web服务器Tornado使用小结
2014/05/06 Python
浅谈五大Python Web框架
2017/03/20 Python
Python assert语句的简单使用示例
2019/07/28 Python
Python不支持 i ++ 语法的原因解析
2020/07/22 Python
完美解决IE8下不兼容rgba()的问题
2017/03/31 HTML / CSS
静态成员和非静态成员的区别
2012/05/12 面试题
用Java语言将一个键盘输入的数字转化成中文输出
2013/01/25 面试题
英语专业毕业生自我鉴定
2013/11/09 职场文书
教师档案管理制度
2014/01/23 职场文书
大学辅导员事迹材料
2014/02/05 职场文书
幼儿园小班植树节活动方案
2014/03/04 职场文书
幼儿园家长安全责任书
2014/07/22 职场文书
村级四风对照检查材料
2014/08/24 职场文书
小学大队干部竞选稿
2015/11/20 职场文书
MySQL pt-slave-restart工具的使用简介
2021/04/07 MySQL
总结Python使用过程中的bug
2021/06/18 Python
Python实现归一化算法详情
2022/03/18 Python
使用Bandicam录制鼠标指针并附带点击声音,还可以添加点击动画效果
2022/04/11 数码科技