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 相关文章推荐
jQuery 表单验证扩展(四)
Oct 20 Javascript
jQuery操作select的实例代码
Jun 14 Javascript
利用jQuery的deferred对象实现异步按顺序加载JS文件
Mar 17 Javascript
js 获取、清空input type="file"的值示例代码
Feb 19 Javascript
node爬取微博的数据的简单封装库nodeweibo使用指南
Jan 02 Javascript
javascript html5 canvas实现可拖动省份的中国地图
Mar 11 Javascript
Vue.js每天必学之过渡与动画
Sep 06 Javascript
tablesorter.js表格排序使用方法(支持中文排序)
Feb 10 Javascript
vue学习笔记之v-if和v-show的区别
Sep 20 Javascript
vue项目中使用fetch的实现方法
Apr 25 Javascript
egg.js的基本使用和调用数据库的方法示例
May 18 Javascript
不依任何赖第三方,单纯用vue实现Tree 树形控件的案例
Sep 21 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 rsa加密解密使用方法
2015/04/27 PHP
使用URL传输SESSION信息
2015/07/14 PHP
php文件上传后端处理小技巧
2016/05/22 PHP
PHP实现的贪婪算法实例
2017/10/17 PHP
PHP异步进程助手async-helper
2018/02/05 PHP
CI框架网页缓存简单用法分析
2018/12/26 PHP
PHP simplexml_import_dom()函数讲解
2019/02/03 PHP
php中isset与empty函数的困惑与用法分析
2019/07/05 PHP
php引用和拷贝的区别知识点总结
2019/09/23 PHP
基于jQuery的的一个隔行变色,鼠标移动变色的小插件
2010/07/06 Javascript
JS实现的简洁纵向滑动菜单(滑动门)效果
2015/10/19 Javascript
JavaScript提高性能知识点汇总
2016/01/15 Javascript
Node.js学习入门
2017/01/03 Javascript
NodeJs搭建本地服务器之使用手机访问的实例讲解
2018/05/12 NodeJs
微信小程序的线程架构【推荐】
2019/05/14 Javascript
[56:18]VGJ.S vs Secret 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python使用在线API查询IP对应的地理位置信息实例
2014/06/01 Python
探究Python多进程编程下线程之间变量的共享问题
2015/05/05 Python
Python子类继承父类构造函数详解
2019/02/19 Python
python实现对输入的密文加密
2019/03/20 Python
Django models.py应用实现过程详解
2019/07/29 Python
python中的Elasticsearch操作汇总
2019/10/30 Python
wxpython布局的实现方法
2019/11/01 Python
python关于调用函数外的变量实例
2019/12/26 Python
PyTorch的torch.cat用法
2020/06/28 Python
VELTRA台湾:世界自由行专家
2017/08/15 全球购物
捷克体育用品购物网站:D-sport
2017/12/28 全球购物
澳大利亚现代波西米亚风格女装网站:Bohemian Traders
2018/04/16 全球购物
亲子读书活动方案
2014/02/22 职场文书
《小池塘》教学反思
2014/02/28 职场文书
农村婚庆司仪主持词
2014/03/15 职场文书
就业意向书
2014/07/29 职场文书
法定代表人授权委托书格式
2014/10/14 职场文书
毕业生政审意见范文
2015/06/04 职场文书
大学体育课感想
2015/08/10 职场文书
python库sklearn常用操作
2021/08/23 Python