Question

我无法在angularjs文档中找到任何内容，也无法在线查找表单验证的这一特定方面。您知道有人在输入字段中写入内容（例如：姓名，电话号码，电子邮件等），然后会出现绿色复选标记吗？或者X似乎暗示它是错误的，不完整的等等。

所以，我在我的文件夹中有这些图像，可以在任何一种情况下使用。问题是，我找不到文档来正确实现我想要实现的目标。我认为angularjs将是使用的解决方案，因为我的其余代码是有角度的。

由于这是angularjs，唯一提供可行选项的帖子和文档（由于某些原因不起作用）有以下选项：

https://docs.angularjs.org/tutorial/step_09

我正在考虑使用CSS来欺骗浏览器使一个或另一个图像在验证时出现。我认为它可能会强制我的其他 div中的图像出现，但无济于事。

例如，在这个CSS中，我尝试了这个：

.ng-valid.ng-dirty .div.test{
    border-color: green;
    content:url(http://example.com/image);
    }

在我的HTML中使用它：

<div class="test">
               <label style="float:left">by:</label>
               <input class="form-control controltwo" required ng-model="reviewCtrl.review.author" name="email" id="email" type="email" style="width:350px;" placeholder="Email Address"/>

</div>

正如我之前所说，我正在尝试使用angularjs来实现某些目标。由于CSS可用于样式，因此不能将其作为样式选项和复杂的验证器。我已尝试在链接上显示一些技巧，但它们不起作用。至于第二个链接，它只是不是为了这个目的，并且考虑到它们仅用于过滤器和图像，过滤器的文档没有帮助。

Answer 1

实现所需内容的一种简单方法是查看表单控件的$ valid或$ invalid属性。

例如，要在电子邮件无效时显示一条小消息，您可以将此元素放入标记中。

<div ng-show='reviewForm.email.$dirty && reviewForm.email.$invalid'>Invalid Email</div>

reviewForm是表单的名称，email是输入控件的名称。

以下是一名证明这一点的傻瓜：http://plnkr.co/edit/tUuToy99xjfMhbyMd3eV

您可以将元素替换为您想要的任何内容

Answer 2

您可以使用ng-show，ng-src和ng-model执行此操作，具体取决于您要验证的内容。

https://docs.angularjs.org/api/ng/directive/ngModel

https://docs.angularjs.org/api/ng/directive/ngShow

https://docs.angularjs.org/api/ng/directive/ngSrc

ng-model：text下的示例显示了您想要的内容。如果您不使用表单，则应该可以使用ng-change启动支票并将图像更改为相应的图像。

https://docs.angularjs.org/api/ng/input/input%5Btext%5D

如果ng-show监视相关字段的$ valid属性，则可以在验证为false时隐藏复选标记，并在true时显示。如果你想要一个X，你可以翻转逻辑。

如何在angularjs中验证时添加复选标记和x？

2 个答案: