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实现 在光标处插入指定内容
May 25 Javascript
JavaScript使用yield模拟多线程的方法
Mar 19 Javascript
浅析Node.js的Stream模块中的Readable对象
Jul 29 Javascript
使用Object.defineProperty实现简单的js双向绑定
Apr 15 Javascript
vue mint-ui学习笔记之picker的使用
Oct 11 Javascript
浅谈webpack打包生成的bundle.js文件过大的问题
Feb 22 Javascript
vue中实现左右联动的效果
Jun 22 Javascript
取消Bootstrap的dropdown-menu点击默认关闭事件方法
Aug 10 Javascript
对Vue2 自定义全局指令Vue.directive和指令的生命周期介绍
Aug 30 Javascript
JavaScript 复制对象与Object.assign方法无法实现深复制
Nov 02 Javascript
Vue项目中最新用到的一些实用小技巧
Nov 06 Javascript
JS中作用域以及变量范围分析
Jul 18 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查询网站的PR值
2013/10/30 PHP
Discuz7.2版的faq.php SQL注入漏洞分析
2014/08/06 PHP
php中使用PHPExcel读写excel(xls)文件的方法
2014/09/15 PHP
php面向对象编程self和static的区别
2016/05/08 PHP
php strftime函数获取日期时间(switch用法)
2018/05/16 PHP
PHP实现支持CURL字符串证书传输的方法
2019/03/23 PHP
laravel框架实现去掉URL中index.php的方法
2019/10/12 PHP
laravel 数据验证规则详解
2019/10/23 PHP
解读JavaScript中 For, While与递归的用法
2013/05/07 Javascript
JavaScript操纵窗口的方法小结
2013/06/28 Javascript
js中继承的几种用法总结(apply,call,prototype)
2013/12/26 Javascript
JavaScript中toString()方法的使用详解
2015/06/05 Javascript
WEB开发之注册页面验证码倒计时代码的实现
2016/12/15 Javascript
ajax与json 获取数据并在前台使用简单实例
2017/01/19 Javascript
微信小程序scroll-view实现横向滚动和上拉加载示例
2017/03/06 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【圆形情况】
2018/12/13 Javascript
微信小程序五子棋游戏的棋盘,重置,对弈实现方法【附demo源码下载】
2019/02/20 Javascript
JS大坑之19位数的Number型精度丢失问题详解
2019/04/22 Javascript
vue回到顶部监听滚动事件详解
2019/08/02 Javascript
JavaScript this使用方法图解
2020/02/04 Javascript
Vuex实现购物车小功能
2020/08/17 Javascript
在win和Linux系统中python命令行运行的不同
2016/07/03 Python
CentOS 7下Python 2.7升级至Python3.6.1的实战教程
2017/07/06 Python
python+django+sql学生信息管理后台开发
2018/01/11 Python
对json字符串与python字符串的不同之处详解
2018/12/19 Python
python笔记_将循环内容在一行输出的方法
2019/08/08 Python
python中threading开启关闭线程操作
2020/05/02 Python
python实现启动一个外部程序,并且不阻塞当前进程
2020/12/05 Python
HTML5中input[type='date']自定义样式与日历校验功能的实现代码
2017/07/11 HTML / CSS
美国Randolph太阳镜官网:美国制造的飞行员太阳镜和射击眼镜
2018/06/15 全球购物
如何安装ruby on rails
2014/02/09 面试题
美术教师岗位职责
2014/03/18 职场文书
企业指导教师评语
2014/04/28 职场文书
生物学专业求职信
2014/07/23 职场文书
暑假社会实践心得体会
2014/09/02 职场文书
2015年社区矫正工作总结
2015/04/21 职场文书