Question

我使用正则表达式来验证带有angularjs的一些表单输入。我使用ng-pattern。

<input type="text" ng-pattern="/^([A-z]){3}$/">
<button type="submit" ng-disabled="demoForm.$invalid">Ok</button>

如果我输入任何不匹配表达式，不有效（如预期的那样）。如果我输入与模式匹配的内容，它将是有效的（如预期的那样）。

但它根本无法正常工作。如果我没有输入任何内容（空文本输入），表单有效，这就是我想要避免的：它应该无效。

有什么建议吗？

Answer 1

您需要为输入提供ng-model属性以进行Angular表单验证以识别它。您可能还希望为输入提供name属性以进行更多控制。请参阅Angular Input documentation。

此示例应演示ng-model和name如何用于表单验证。请注意，我还调整了您的正则表达式并输入了required。

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp">
  
  <form name="demoForm">
    
    <input type="text" 
           ng-model="myValue" 
           name="myInput" 
           ng-pattern="/^[A-Za-z]{3}$/" 
           required />
    
    <button type="submit" ng-disabled="demoForm.$invalid">Ok</button>
    
    <div>Input valid? {{demoForm.myInput.$valid}}</div>
    <div>Form valid? {{demoForm.$valid}}</div>
    <div>Model value: {{myValue}}</div>
  </form>
  
</div>

＆＃13;

正则表达式不会按预期运行

1 个答案: