我从对象制作了一个简单的表单..现在我验证该表单。我在验证时遇到一些问题。请在 Firefox 上检查这一点..
http://plnkr.co/edit/CFUR2mgVv4hzXPF7AR9y?p=preview
- 当我写入必需的 true 并在运行应用程序后显示消息“请输入有效的电子邮件”时，我的字段变成红色(输入字段上的红色边框)。当用户将焦点从一个字段移到另一个字段时，它应该变成红色。我需要显示两条消息“请输入电子邮件”和“请输入有效的电子邮件”我该怎么做？
我学习了很多教程，但我应用了这个东西$dirty，$pristine，但对我来说没有任何作用。 我从那里验证学习.. http://scotch.io/tutorials/javascript/angularjs-form-validation
<ul ng-repeat="input in inputs">
<li><span>{{input.name}} : </span>
<div ng-switch="input.type" ng-form="myfrm">
<div ng-switch-when="text">
<input type="text" ng-model="outputs[input.name]"/>
</div>
<div ng-switch-when="email" class="form-group" >
<input type="email" ng-model="outputs[input.name]" name="input" ng-required="input.required">
<P ng-show="myfrm.input.$invalid && !myform.input.$pristine">Please enter a valid email</P>
</div>
<div ng-switch-when="number">
<input type="number" ng-model="outputs[input.name]" ng-required="input.required" name="input"/>
<P ng-if="myfrm.input.$invalid">Please enter a valid number</P>
</div>
<div ng-switch-when="url">
<input type="number" ng-model="outputs[input.name]"/>
</div>
<div ng-switch-when="checkbox">
<input type="checkbox" ng-model="outputs[input.name]" ng-checked="outputs[input.name]" value="outputs[input.name]"/>
</div>
</div>
</li>
</ul>
最佳答案
您使用$pristine时存在拼写错误，myform应该是myfrm，就像您在ng-form<中设置的那样:
<p ng-show="myfrm.input.$invalid && !myfrm.input.$pristine">Please enter a valid email</p>
要针对无效电子邮件和空电子邮件显示不同的消息，您可以使用 $error 而不是 $invalid，如下所示:
<p ng-show="myfrm.input.$error.email && !myfrm.input.$pristine">Please enter a valid email</p>
<p ng-show="myfrm.input.$error.required && !myfrm.input.$pristine">Please enter the email</p>
Plunker 示例: http://plnkr.co/edit/eD4OZ8nqETBACpSMQ7Tm?p=preview
关于javascript - 使用 Angular JS 的验证问题(在 Firefox 上显示红色边框)？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25212991/