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 相关文章推荐
js验证电话号码与手机支持+86的正则表达式
Jan 23 Javascript
完美兼容各大浏览器获取HTTP_REFERER方法总结
Jun 24 Javascript
jQuery获得指定元素坐标的方法
Apr 14 Javascript
jQuery实现彩带延伸效果的网页加载条loading动画
Oct 29 Javascript
jquery.validate提示错误信息位置方法
Jan 22 Javascript
js中常用的Tab切换效果(推荐)
Aug 30 Javascript
Vue2实现组件props双向绑定
Dec 02 Javascript
jquery easyui DataGrid简单示例
Jan 23 Javascript
详谈angularjs中路由页面强制更新的问题
Apr 24 Javascript
es7学习教程之fetch解决异步嵌套问题的方法示例
Jul 21 Javascript
微信小程序实现的一键拨号功能示例
Apr 24 Javascript
javascript设计模式 ? 观察者模式原理与用法实例分析
Apr 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
PHP静态类
2006/11/25 PHP
PHP调用Twitter的RSS的实现代码
2010/03/10 PHP
PHP版 汉字转码的实现详解
2013/06/09 PHP
php float不四舍五入截取浮点型字符串方法总结
2013/10/28 PHP
yii中widget的用法
2014/12/03 PHP
浅析Yii2 GridView 日期格式化并实现日期可搜索教程
2016/04/22 PHP
PHP页面跳转实现延时跳转的方法
2016/12/10 PHP
PHP的PDO预处理语句与存储过程
2019/01/27 PHP
经验几则 推荐
2006/09/05 Javascript
运用jquery实现table单双行不同显示并能单行选中
2009/07/25 Javascript
jQuery 1.4 15个你应该知道的新特性(译)
2010/01/24 Javascript
兼容IE和FF的js脚本代码小结(比较常用)
2010/12/06 Javascript
JavaScript中的匀速运动和变速(缓冲)运动详细介绍
2012/11/11 Javascript
javaScript array(数组)使用字符串作为数组下标的方法
2013/11/19 Javascript
jQuery自定义事件的简单实现代码
2014/01/27 Javascript
node.js中的fs.writeSync方法使用说明
2014/12/15 Javascript
javascript使用for循环批量注册的事件不能正确获取索引值的解决方法
2014/12/20 Javascript
javascript实现简单的二级联动
2015/03/19 Javascript
jQuery Select下拉框操作小结(推荐)
2016/07/22 Javascript
jquery使用FormData实现异步上传文件
2018/10/25 jQuery
JS数组方法join()用法实例分析
2020/01/18 Javascript
python实现数值积分的Simpson方法实例分析
2015/06/05 Python
Python中属性和描述符的正确使用
2016/08/23 Python
在Python中Dataframe通过print输出多行时显示省略号的实例
2018/12/22 Python
超全Python图像处理讲解(多模块实现)
2020/04/13 Python
Python下划线5种含义代码实例解析
2020/07/10 Python
摩飞电器俄罗斯官方网站:Morphy Richards俄罗斯
2020/07/30 全球购物
预备党员入党思想汇报
2014/01/04 职场文书
酒店中秋节活动方案
2014/01/31 职场文书
法制报告会主持词
2014/04/02 职场文书
荷叶母亲教学反思
2014/04/30 职场文书
查摆问题自我剖析材料
2014/08/18 职场文书
优秀党员申报材料
2014/12/18 职场文书
还款承诺书范本
2015/01/20 职场文书
入团申请书格式
2019/06/20 职场文书
超市啤酒狂欢夜策划方案范文!
2019/07/03 职场文书