3

我真的很挣扎。我需要强制用户在一个文本框中输入名字和姓氏。我使用 AngularJS，我想使用 ng-pattern 验证文本字段。该字段应接受所有字符，并且需要 2 个单词。这是输入：

<input name="fistname_lastname" ng-model="fistname_lastname" ng-pattern='my_pattern' type="text">

我在控制器中有我的模式，如下所示：

$scope.my_pattern = /^\s*\w*\s*$/;

有没有其他更好的方法来做到这一点。

4

2 回答 2

4

是的，您也可以通过指令来执行此操作，但仅用于验证是否仅包含两个字符的文本ng-pattern将是更好的方法。

在这里，您的 html 将使用(.*?[a-zA-Z]){2,}此模式。

HTML

<input type="text" ng-model="fistname_lastname" max-length="30" 
ng-pattern="/^(.*?[a-zA-Z]){2,}$/" placeholder="add new todo here"/>

工作小提琴

更新

如果您想阻止表单提交，那么您无需担心。Angular 在内部为你管理这个。每当您提到ng-pattern任何表单字段时，角度都会为该字段创建对象（字段应该具有name和ng-model属性），该对象负责特定字段的有效性。由于ng-patternregx 不满意，因此角度使该字段为invalid，意味着它附加 ng-invalid-pattern&ng-invalid类。结果表格也变得无效。现在，如果您可以查看表单对象，您会发现该表单是通过在 html 上invalid使用语法获得的。form.$valid

HTML

<form name="form" ng-submit="submit()">
    <input type="text" ng-model="firstname_lastname"  size="30" ng-pattern="/^(.*?[a-zA-Z]){2,}$/" placeholder="add new todo here"/>

    <button type="submit">Submit</button>
</form>

控制器

$scope.submit = function(){
    if($scope.form.$invalid) //here you can stop use from submitting for by checking validity
        alert('Form is invalid'); //form is invalid
    else
         alert('Form is valid');//here you can do actual submit to server
}

更新小提琴

希望这可以帮助你，谢谢。

于 2015-02-24T15:38:10.860 回答
0

感谢你的帮助。但真正起作用的是这个正则表达式。

\b([A-Z]{1}[a-z]{1,30}[- ]{0,1}|[A-Z]{1}[- \']{1}[A-Z]{0,1}  
[a-z]{1,30}[- ]{0,1}|[a-z]{1,2}[ -\']{1}[A-Z]{1}[a-z]{1,30}){2,5}
于 2015-02-25T12:42:31.107 回答