Angularjs驗證用戶輸入的字符串是否為日期時間

更新時間：2017年06月01日 14:15:50 作者：Insus.NET

這篇文章主要介紹了Angularjs驗證用戶輸入的字符串是否為日期時間,需要的朋友可以參考下

在angularjs中，想在文本框中，驗證用戶輸入的字符串是否為日期時間。

剛開始時，Insus.NET想到的是正則，這只是驗證到日期與時間的格式是否正確而已，而對于2月最后一天或是30或是31號，還是無能為力。

因此，Insus.NET想使用angularjs的自定義指令來驗證解決此問題。

在ASP.NET MVC的項目中，創(chuàng)建一個控制器，并創(chuàng)建一個Action:

控制器源代碼：

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文件：

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驗證用戶輸入的字符串是否為日期時間，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

AngularJS Module方法詳解
AngularJS中的Module類負責定義應用如何啟動，它還可以通過聲明的方式定義應用中的各個片段。我們來看看它是如何實現(xiàn)這些功能的
2015-12-12
AngularJS 模塊詳解及簡單實例
本文主要介紹AngularJS 模塊,這里幫大家整理了相關資料,詳細介紹了AngularJS的基礎知識,有需要的朋友可以參考下
2016-07-07
Angular組件間通信的新解決方案詳解
本文通過對比幾種Angular組件間的通信方式,給大家介紹了一種新的Angular組件間通信的解決方案,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
2023-08-08
Angular中樣式綁定解決方案
這篇文章主要介紹了Angular中樣式綁定解決方案,使用ngClass和ngStyle可以進行樣式的綁定,本文結合實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
2023-08-08
使用AngularJS中的SCE來防止XSS攻擊的方法
這篇文章主要介紹了使用AngularJS中的SCE來防止XSS攻擊的方法,依靠合理地轉碼為HTML來預防跨站腳本漏洞共計,需要的朋友可以參考下
2015-06-06
簡單說說angular.json文件的使用
這篇文章主要介紹了簡單說說angular.json文件的使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-10-10
本篇文章主要介紹了angular.js 路由及頁面?zhèn)鲄⑹纠【幱X得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-02-02