Question

我从对象创建一个简单的表单..现在我验证了那个表单。我在验证时遇到了一些问题。请在firefox上查看这个..

http://plnkr.co/edit/CFUR2mgVv4hzXPF7AR9y?p=preview

我的字段变为红色（输入字段上的红色边框）当我写入所需的真实并显示消息“请输入有效的电子邮件”后，运行app.it应该变为红色，当用户将焦点移动到另一个字段时。我需要显示两条消息“请输入电子邮件”，“请输入有效的电子邮件”我该怎么做？

我学习了很多教程但是我应用了这个东西 $ 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>

Answer 1

您使用$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

使用角度js验证问题（firefox上的红色边框显示）？

1 个答案: