在文本框中需要两个单词，使用 AngularJS答案

【问题标题】：Require two words in textbox, with AngularJS在文本框中需要两个单词，使用 AngularJS
【发布时间】：2015-04-26 07:24:42
【问题描述】：

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

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

我在控制器中有我的模式，像这样：

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

还有其他更好的方法吗？

【问题讨论】：

试试这个/^(.*?[a-zA-Z]){2,}$/
“有没有更好的方法”？更好这个词非常具有暗示性，您介意改写一下吗？您还没有告诉我们您的解决方案在当前状态下有什么问题。为什么你觉得它的工作不令你满意？请在示例输出中包含实际行为和您想要的行为。
是的，你是对的。我的意思是，如果可能或更好地使用，另一种解决方案，如 html5 来做我需要的。要求用户在一个文本框中插入名字和姓氏。

标签： javascript html angularjs validation angularjs-ng-pattern

【解决方案1】：

是的，您可以通过 directive too 进行操作，但仅用于验证文本是否包含两个字符，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"/>

Working Fiddle

更新

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

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
}

Updated Fiddle

希望对您有所帮助，谢谢。

【讨论】：

是的，这种模式可以满足我的需要。但我仍在努力验证部分。提交表单后，如何使用此模式停止提交？
编写ng-submit="submit()" 方法，该方法将在您提交表单时调用，然后在该方法中使用if($scope.form.$valid) //submit the form usning ajax else alert("please fill required fields.");
感谢您的帮助。提交部分，它的工作，但模式不是。在您的示例中，它始终验证文本框。
@Liam 在答案中检查我更新的小提琴......现在一切都会正常工作

【解决方案2】：

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

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

【讨论】：