Angular JS文本框验证允许特定文本限制其他值

时间:2016-08-23 13:14:50

标签: javascript jquery angularjs

我想限制用户输入“打开”或“关闭”字符串值以外的其他内容。

这意味着用户只能键入“打开”或“关闭”文本,并且maxlength也是6.为此创建了指令,但仍允许其他文本值,如何捕获或允许用户只键入那两个文本值。

plunkr链接

http://plnkr.co/edit/LFbPbRAMyYZGhTZ1F7GU?p=preview

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {


});

app.directive('wmBlock', function ($parse) {
    return {

        link: function (scope, elm, attrs) {

          elm.bind('keypress', function(e){

            if(scope.foo==="open" || scoe.foo==="closed"){
              return true;
            }
            else
            {
               e.preventDefault();
              return false;
            }
            }
          });
        }
    }   
});

2 个答案:

答案 0 :(得分:0)

app.directive('wmBlock', function ($browser, $parse) {
   return {

    link: function ($scope, $element, $attrs, ngModelCtrl) {

      $element.bind('keypress', function(e){

        $browser.defer(
          function(){

            var modelGetter = $parse($attrs['ngModel']);

            var value = modelGetter($scope);
            var expression = new RegExp(/^(open|close)$/);
            if(expression.test(value))
               alert("founded!");

          });


      });
    }
  }   
});

答案 1 :(得分:0)

我使用$ watch函数

完成了这项工作
app.directive('isNumber', function () {
    return {
        require: 'ngModel',
        link: function (scope) {    
            scope.$watch('opennumber', function(newValue,oldValue) {
            if(newValue=="o" || newValue=="c") return;
            if(newValue=="op" || newValue=="ope" || newValue=="open") return;
            if(newValue=="cl" || newValue=="clo" || newValue=="clos" ||  newValue=="close" || newValue=="closed") return;

                if (newValue) {
                    scope.opennumber = oldValue;
                }
            });
        }
    };
});

的jsfiddle

http://jsfiddle.net/vfsHX/2422/