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入门教程(3) js面向对象
Jan 31 Javascript
JavaScript中实现异步编程模式的4种方法
Sep 24 Javascript
jQuery on()方法使用技巧详解
Apr 16 Javascript
jQuery动态修改字体大小的方法【测试可用】
Sep 09 Javascript
微信和qq时间格式模板实例详解
Oct 21 Javascript
JS触摸事件、手势事件详解
May 04 Javascript
js 只比较时间大小的实例
Oct 26 Javascript
解决vue中虚拟dom,无法实时更新的问题
Sep 15 Javascript
JavaScript实现的拼图算法分析
Feb 13 Javascript
jQuery-Citys省市区三级菜单联动插件使用详解
Jul 26 jQuery
js获取本日、本周、本月的时间代码
Feb 01 Javascript
nuxt静态部署打包相对路径操作
Nov 06 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 xml实例 留言本
2009/03/20 PHP
解析PHP中的file_get_contents获取远程页面乱码的问题
2013/06/25 PHP
phpStudy访问速度慢和启动失败的解决办法
2015/11/19 PHP
PHP实现防止表单重复提交功能【基于token验证】
2018/05/24 PHP
收藏Javascript中常用的55个经典技巧
2007/08/12 Javascript
javascript 函数速查表
2010/02/07 Javascript
Jquery对数组的操作技巧整理
2014/03/25 Javascript
node.js中的path.extname方法使用说明
2014/12/09 Javascript
jQuery的选择器中的通配符[id^='code']或[name^='code']及jquery选择器总结
2015/12/24 Javascript
JS中的forEach、$.each、map方法推荐
2016/04/05 Javascript
Javascript实现通过选择周数显示开始日和结束日的实现代码
2016/05/30 Javascript
利用策略模式与装饰模式扩展JavaScript表单验证功能
2017/02/14 Javascript
PHP实现记录代码运行时间封装类实例教程
2017/05/08 Javascript
webpack学习笔记之代码分割和按需加载的实例详解
2017/07/20 Javascript
js实现带进度条提示的多视频上传功能
2020/12/13 Javascript
JS二分查找算法详解
2017/11/01 Javascript
webpack 样式加载的实现原理
2018/06/12 Javascript
vue props对象validator自定义函数实例
2019/11/13 Javascript
ES5新增数组的实现方法
2020/05/12 Javascript
基于原生js实现判断元素是否有指定class名
2020/07/11 Javascript
[51:26]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第二局
2016/03/03 DOTA
[01:08:56]DOTA2-DPC中国联赛 正赛 Magma vs LBZS BO3 第一场 2月7日
2021/03/11 DOTA
Python中encode()方法的使用简介
2015/05/18 Python
python通过socket查询whois的方法
2015/07/18 Python
python基于phantomjs实现导入图片
2016/05/13 Python
python操作redis方法总结
2018/06/06 Python
Python2和Python3中@abstractmethod使用方法
2020/02/04 Python
使用jupyter notebook将文件保存为Markdown,HTML等文件格式
2020/04/14 Python
多视角3D逼真HTML5水波动画
2016/03/03 HTML / CSS
html2canvas生成的图片偏移不完整的解决方法
2020/05/19 HTML / CSS
绿色环保演讲稿
2014/05/10 职场文书
乳制品整治工作方案
2014/05/29 职场文书
汽车专业求职信
2014/06/05 职场文书
2016教师给学生的毕业寄语
2015/12/04 职场文书
诉讼和解协议书
2016/03/23 职场文书
Redis+AOP+自定义注解实现限流
2022/06/28 Redis