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 相关文章推荐
使用Grunt.js管理你项目的应用说明
Apr 24 Javascript
JavaScript中setInterval的用法总结
Nov 20 Javascript
jquery将一个表单序列化为一个对象的方法
Jan 03 Javascript
javascript中使用正则表达式清理table样式的代码
Apr 01 Javascript
原生JS封装Ajax插件(同域、jsonp跨域)
May 03 Javascript
AngularJS实现网站换肤实例
Feb 19 Javascript
Vue全家桶实践项目总结(推荐)
Nov 04 Javascript
图片懒加载imgLazyLoading.js使用详解
Sep 15 Javascript
React Form组件的实现封装杂谈
May 07 Javascript
vue路由拦截及页面跳转的设置方法
May 24 Javascript
Node.js JSON模块用法实例分析
Jan 04 Javascript
vue实现简单加法计算器
Oct 22 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
利用文件属性结合Session实现在线人数统计
2006/10/09 PHP
PHP中usort在值相同时改变原始位置问题的解决方法
2011/11/27 PHP
php页面缓存ob系列函数介绍
2012/10/18 PHP
php时间戳格式化显示友好的时间函数分享
2014/10/21 PHP
PHP上传图片、删除图片简单实例
2016/11/12 PHP
php常用字符串查找函数strstr()与strpos()实例分析
2019/06/21 PHP
php使用自带dom扩展进行元素匹配的原理解析
2020/05/29 PHP
JQery 渐变图片导航效果代码 漂亮
2010/01/01 Javascript
被jQuery折腾得半死,揭秘为何jQuery为何在IE/Firefox下均无法使用
2010/01/22 Javascript
Javascript 判断客户端浏览器类型代码
2010/03/01 Javascript
javascript里模拟sleep(两种实现方式)
2013/01/25 Javascript
js replace 与replaceall实例用法详解
2013/08/03 Javascript
javascript不可用的问题探究
2013/10/01 Javascript
javascipt:filter过滤介绍及使用
2014/09/10 Javascript
js实现简单随机抽奖的方法
2015/01/27 Javascript
简单谈谈node.js 版本控制 nvm和 n
2015/10/15 Javascript
基于javascript实现动态显示当前系统时间
2016/01/28 Javascript
iOS和Android用同一个二维码实现跳转下载链接的方法
2016/09/28 Javascript
jquery实时获取时间的简单实例
2017/01/26 Javascript
ES6实现的遍历目录函数示例
2017/04/07 Javascript
一步一步的了解webpack4的splitChunk插件(小结)
2018/09/17 Javascript
jQuery事件多次绑定与解绑问题实例分析
2019/02/19 jQuery
在node环境下parse Smarty模板的使用示例代码
2019/11/15 Javascript
Python编程入门的一些基本知识
2015/05/13 Python
使用Django启动命令行及执行脚本的方法
2018/05/29 Python
基于Pyinstaller打包Python程序并压缩文件大小
2020/05/28 Python
python 通过文件夹导入包的操作
2020/06/01 Python
Manuka Doctor美国官网:麦卢卡蜂蜜和蜂毒护肤
2016/12/25 全球购物
维多利亚的秘密阿联酋官网:Victoria’s Secret阿联酋
2019/12/07 全球购物
请说出以下代码输出什么
2013/08/30 面试题
小学数学教学反思
2014/02/02 职场文书
学校安全工作汇报材料
2014/08/16 职场文书
村主任“四风”问题个人对照检查材料思想汇报
2014/10/02 职场文书
Python词云的正确实现方法实例
2021/05/08 Python
MySQL into_Mysql中replace与replace into用法案例详解
2021/09/14 MySQL
JS实现刷新网页后之前浏览位置保持不变示例详解
2022/08/14 Javascript