0

我这里做了一个小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>

我尝试使用代码片段但没有工作>，<

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

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

我尝试了很多东西，但我无法弄清楚我做错了什么。

更新：正则表达式已编辑

4

3 回答 3

2

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

input[name=my_input].ng-invalid-pattern{
    border: 2px solid red;
}
于 2017-07-06T09:26:40.040 回答
1

在您的代码片段中，( )*,( )*[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>

于 2017-07-06T10:16:19.300 回答
-1

试试这个

<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>

于 2017-07-06T09:57:13.210 回答