如何限制某些字詞？

我想做出那樣的輸入：我PROGRAMER，但如果我將輸入錯誤的字母，會自動刪除它，否則不會允許我鍵入字母。如何限制某些字詞？

我已經試過這還挺代碼：index.html的

<!DOCTYPE html> 
<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
<script src="script.js"></script> 
<link rel="stylesheet" type="text/css" href="style.css"> 
    <title>I AM Programmer</title> 
</head> 
<body ng-app="myApp"> 

<form name="myForm"> 
<input name="myInput" ng-model="myInput" required my-directive> 
</form> 

<!-- <h1>{{myForm.myInput.$valid}}</h1> 
--> 
</html>

的script.js

var app = angular.module('myApp', []); 
app.directive('myDirective', function() { 
    return { 
     require: 'ngModel', 
     link: function(scope, element, attr, mCtrl) { 
      function myValidation(value) { 
       if (value.indexOf("I am Programmer") > -1) { 
        mCtrl.$setValidity('charE', true); 
       } else { 
        mCtrl.$setValidity('charE', false); 
       } 
       return value; 
      } 
      mCtrl.$parsers.push(myValidation); 
     } 
    }; 
});

的style.css

body{ 
     background-color: #fbfbfb; 
} 
input.ng-invalid { 
    border:2px solid #EA4335; 
} 
input.ng-valid { 
    background-color:lightgreen; 
} 
input{ 
width:800px; 
height:60px; 
text-align: center; 
font-size: 30px 
}

來源

2017-02-15 brithwulf

哪裏是你的JavaScript代碼？ – Connum

也發佈你的'verify（）'函數代碼。 –

我想這是你想要的
HTML

<input name="myInput" valid-ng-model="myInput" data-ng-trim="false" required my-directive>

的script.js的輸入值

var app = angular.module('myApp', []); 
app.directive('myDirective', function ($parse) { 
    "use strict"; 
    return { 
     require: 'ngModel', 
     restrict: "A", 
     link: function (scope, element, attr, mCtrl) { 
      function myValidation(value) { 
       if ("I am Programmer".toLowerCase().indexOf(value.toLowerCase()) === 0) { 
        mCtrl.$setValidity('charE', true); 
        return value; 
       } else { 
        mCtrl.$setViewValue(scope.myInput); 
        mCtrl.$render(); 
        mCtrl.$setValidity('charE', false); 
       } 
      } 
      mCtrl.$parsers.push(myValidation); 
     } 
    }; 
}); 

app.directive('validNgModel', function ($compile, $parse) { 
    return { 
     terminal: true, 
     priority: 1000, 
     scope: true, 
     link: function link(scope, element, attrs) { 
      var parsedNgModel = $parse(attrs.validNgModel); 
      scope.$$customNgModel = angular.copy(parsedNgModel(scope)); 
      element.attr('ng-model', '$$customNgModel'); 
      element.removeAttr('valid-ng-model'); 
      var compiledElement = $compile(element)(scope); 
      var ngModelCtrl = compiledElement.controller('ngModel'); 
      scope.$watch('$$customNgModel', function (newModelValue) { 
       if (ngModelCtrl.$valid || ngModelCtrl.$error.required) { 
        parsedNgModel.assign(scope.$parent, newModelValue); 
       } 
      }); 
     } 
    }; 
});

JSFiddle

來源

2017-02-15 17:18:47 amansinghgusain

感謝男人的模糊值！那就是我想要的。謝謝 – brithwulf

您可以使用$驗證 。下面是示例，與您的示例一致。

angular.module("myApp", []) 
 
    .controller('ctrl', function($scope) {}) 
 
    .directive('myDirective', function() { 
 
    return { 
 
     require: 'ngModel', 
 
     link: function(scope, element, attr, mCtrl) { 
 
     mCtrl.$validators.strictCheck = function(modelVal) { 
 
      var regex = /^I am Programmer$/; 
 
      if (regex.test(modelVal)) { 
 
      return true; 
 
      } else { 
 
      return false; 
 
      } 
 
     } 
 
     } 
 
    }; 
 
    });

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script data-require="[email protected]" data-semver="1.5.6" src="https://code.angularjs.org/1.5.6/angular.min.js"></script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script src="script.js"></script> 
 
</head> 
 

 
<body ng-app="myApp" ng-controller="ctrl"> 
 
    <form name="myForm"> 
 
    <input name="myInput" ng-model="myInput" required my-directive> 
 
    <span ng-if="myForm.myInput.$error.required"> 
 
     Required! 
 
    </span> 
 
    <span ng-if="myForm.myInput.$error.strictCheck"> 
 
     Please input 'I am Programmer' 
 
    </span> 
 
    </form> 
 

 
</body> 
 

 
</html>

您可以相應地修改正則表達式，以配合您的需要。您還可以設置使用$ setViewValue（modelValue）和$渲染（）

mCtrl.$setViewValue(""); 
mCtrl.$render();

來源

2017-02-15 10:55:22 Dev

我的代碼做同樣的事情，但如果你將鍵入錯誤例如信：我SM程序員應該自動清除錯誤的字母 - >我親F-（F刪除），只留下我臨。和我應該在哪裏用戶mCtrl。$ setViewValue和$ render？ – brithwulf

mCtrl。$ setViewValue和$ render可以在您的正則表達式測試失敗時使用，但在您的情況下它不會應用。我認爲你應該重置輸入欄 – Dev

如何限制某些字詞？

回答

相關問題