JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.angularjs.org/1.4.7/angular.js"></script>
<div ng-app="example">
    <h1>Validate Directive</h1>

    <p>The Validate directive allow us to restrict the characters an input can accept.</p>

    <h3><code>alphabetical</code> <span style="color: green">(works)</span></h3>
    <p>Restricts input to alphabetical (A-Z, a-z) characters only.</p>
    <label><input type="text" validate="alphabetical" ng-model="validate.alphabetical"/></label>

    <h3><code>alphanumeric</code> <span style="color: green">(works)</span></h3>
    <p>Restricts input to alphanumeric (A-Z, a-z, 0-9) characters only.</p>
    <label><input type="text" validate="alphanumeric" ng-model="validate.alphanumeric" /></label>

    <h3><code>currency</code> <span style="color: red">(doesn't work)</span></h3>
    <p>Restricts input to US currency characters with comma for thousand separator (optional) and cents (optional).</p>
    <label><input type="text" validate="currency" ng-model="validate.currency" /></label>

    <h3><code>date</code> <span style="color: red">(doesn't work)</span></h3>
    <p>Restricts input to the mm/dd/yyyy date format only.</p>
    <label><input type="text" validate="date" ng-model="validate.date" /></label>

    <h3><code>email</code> <span style="color: red">(doesn't work)</span></h3>
    <p>Restricts input to email format only.</p>
    <label><input type="text" validate="email" ng-model="validate.email" /></label>

    <h3><code>numeric</code> <span style="color: green">(works)</span></h3>
    <p>Restricts input to numeric (0-9) characters only.</p>
    <label><input type="text" validate="numeric" ng-model="validate.numeric" /></label>
    
</div>

JavaScript

angular.module('example', [])
  .directive('validate', function () {
    var validations = {
          // works
          alphabetical: /^([a-zA-Z]*(?=[^a-zA-Z]))./,
          
          // works
          alphanumeric: /^([a-zA-Z0-9]*(?=[^a-zA-Z0-9]))./,
          
          // doesn't work - need to negate?
          // taken from: http://stackoverflow.com/questions/354044/what-is-the-best-u-s-currency-regex
          currency: /(\.((?=[^\d])|\d{2}(?![^,\d.]))|,((?=[^\d])|\d{3}(?=[^,.$])|(?=\d{1,2}[^\d]))|\$(?=.)|\d{4,}(?=,)).|[^\d,.$]|^\$/,
          
          // doesn't work - need to negate?
          // taken from here: http://stackoverflow.com/questions/15196451/regular-expression-to-validate-datetime-format-mm-dd-yyyy
          date: /^(((0[1-9]|1[012])|(\d{2}\/\d{2}))(?=[^\/])|((\d)|(\d{2}\/\d{2}\/\d{1,3})|(.+\/))(?=[^\d])|\d{2}\/\d{2}\/\d{4}(?=.)).|^(1[3-9]|[2-9]\d)|((?!^)(3[2-9]|[4-9]\d)\/)|[3-9]\d{3}|2[1-9]\d{2}|(?!^)\/\d\/|^\/|[^\d/]/,
          
          // doesn't work - need to negate?
          // taken from: http://stackoverflow.com/questions/46155/validate-email-address-in-javascript
          email: /^([\w.$-]+\@[\w.]+(?=[^\w.])|[\w.$-]+\@(?=[^\w.-])|[\w.@-]+(?=[^\w.$@-])).$|\.(?=[^\w-@]).|[^\w.$@-]|^[^\w]|\.(?=@).|@(?=\.)./i,
          
          // works
          numeric: /^(\d*(?=[^\d]))./
        }
    ;

    return {
      require: 'ngModel',

      scope: {
        validate: '@'
      },

      link: function (scope, element, attrs, modelCtrl) {
        var pattern = validations[scope.validate] || scope.validate
        ;

        modelCtrl.$parsers.push(function (inputValue) {
          var transformedInput = inputValue.replace(pattern, '$1')
          ;
          
          if (transformedInput != inputValue) {
            modelCtrl.$setViewValue(transformedInput);
            modelCtrl.$render();
          }

          return transformedInput;
        });
      }
    };
  });