如何使用ng-pattern编辑输入样式

Question

我在这里做了一个小js

我还将代码添加到堆栈溢出代码段中，但由于某些原因，它对我不起作用

 var myApp = angular.module('myApp',[]); function MyCtrl($scope) { $scope.my_model = '' $scope.my_regex = '/^[A-Za-z]+(\\,[A-Za-z]+)*$/'; $scope.my_placeHolder = 'write something'; }

 .invalid input[name=my_input]{ border: 2px solid red; } input[name=my_input] { border: 2px solid blue; }

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-controller="MyCtrl"> <form name="contentForm"> <input type="text" name="my_input" ng-class="{ 'invalid': contentForm['my_input'].$invalid }" ng-model="my_model" ng-pattern="{{my_regex}}" placeholder="{{my_placeHolder}}"> </form> </div>

我尝试使用代码段，但无法正常工作>，<

因此，我的目标是在输入文本未通过正则表达式规则的情况下编辑输入边框（将其设为红色）。

正则表达式应接受任何逗号分隔的字符串。

我尝试了很多东西，但我不知道自己在做什么错。

更新：正则表达式已编辑

Answer 1

如果ng-pattern失败，这表示未满足正则表达式，则将ng-invalid-pattern类添加到<input>元素。 这意味着您应该能够将红色边框添加到未通过以下CSS传递ng-pattern的输入字段中：

input[name=my_input].ng-invalid-pattern{
    border: 2px solid red;
}

Answer 2

在您的代码段中， ( )*,( )*[a-zA-Z]+)*正则表达式无效。 您可以在此处或其他在线工具中测试您的正则表达式。 在这里，我尝试使用简单的数字正则表达式，它工作正常。

 function formCtrl($scope){ $scope.my_model = 'test,dfsdf,dfs' $scope.my_placeHolder = 'write something'; $scope.my_pattern="/^[A-Za-z]+(\\,[A-Za-z]+)*$/";// here you replace your regex which you want }

 .invalid{ border: 2px solid red; } .valid { border: 2px solid blue; }

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <html> <div ng-app ng-controller="formCtrl"> <form name="myForm" > <input type="text" ng-model="my_model" name="my_input" ng-pattern=" {{my_pattern}}" ng-class="{'invalid': myForm.my_input.$error.pattern, 'valid': !myForm.my_input.$error.pattern }" placeholder="{{my_placeHolder}}" /> <span ng-show="myForm.my_input.$error.pattern">Not a valid input!</span> </form> </div> </html>

Answer 3

试试这个

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-controller="MyCtrl"> <form name="contentForm"> <input type="text" name="my_input" ng-class="{'invalid': contentForm['my_input'].$error.pattern }" ng-model="my_model" ng-pattern="'( )*,( )*[a-zA-Z]+)*'" placeholder="{{my_placeHolder}}"> </form> </div>

如何使用ng-pattern编辑输入样式

问题描述

3 个解决方案

解决方案1
1 2017-07-06 09:26:40

解决方案2
1 已采纳 2017-07-06 10:16:19

解决方案3
-1 2017-07-06 09:57:13

如何使用ng-pattern编辑输入样式

问题描述

3 个解决方案

解决方案1 1 2017-07-06 09:26:40

解决方案2 1 已采纳 2017-07-06 10:16:19

解决方案3 -1 2017-07-06 09:57:13

解决方案1
1 2017-07-06 09:26:40

解决方案2
1 已采纳 2017-07-06 10:16:19

解决方案3
-1 2017-07-06 09:57:13