Css 如何添加复选标记和x'；在angularjs中验证时是什么时候？

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

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

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

我正在考虑使用CSS欺骗浏览器，使其在验证时显示一个或另一个图像。我想这可能会迫使我的otherdiv中的图像出现，但没有效果

例如，在这个CSS中，我尝试了以下方法：

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

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

在我的HTML中使用此选项：

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

<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可以用于样式化，所以它不能被欺骗成一个样式化选项和一个复杂的验证器。我在链接上尝试了一些技巧，但都不起作用。至于第二个链接，它并不是为了这个目的而创建的，考虑到它们只是为了过滤器和图像而创建的，过滤器的文档一点帮助也没有。

您可以使用

ng show

、

ng src

和

ng model

来实现这一点，具体取决于您正在验证的内容

ng模型下的示例：text显示了您想要的内容。如果您没有使用表单，您应该能够使用

ng change

进行检查并将图像更改为适当的图像

---

如果

ng show

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

实现所需功能的简单方法是查看表单控件的$valid或$invalid属性

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

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

无效电子邮件

其中，

reviewForm

是表单的名称，

email

是输入控件的名称

下面是一个plunkr演示：

---

您可以用您想要的任何其他内容替换该元素

我们可以再看一些代码吗？你在用表格吗？如果是，您可以使用表单或表单控件的$invalid属性。许多可能的答案-取决于您想要的花式程度。@link64，这是一个plunker。这应该包含所有适当的信息。是的，我用表格@pixelbits不是花哨的lol，只是能够使用我的小图片，每当一封电子邮件似乎是对的或错的人正在打字等等。。。这就是我要找的。现在，我测试了Link的（人笑，不是链接）。我将检查所有的链接，并验证是否有一个更可行的解决方案。谢谢你的链接。我很难通过谷歌甚至stackoverflow提出一个问题。所以有一些参考资料来验证会有帮助。我现在可以给你一个+1:）是的，就是这样。不花哨，但简单如我所寻找的。可能会在未来寻找新奇的东西lol，或者使用gif代替。谢谢你。我很想知道你的答案，但我只有14次。没问题，很乐意帮忙