表单中的angularjs验证问题答案

【问题标题】：angularjs validation issue in a form表单中的angularjs验证问题
【发布时间】：2014-11-23 15:27:10
【问题描述】：

我正在尝试对包含名为“description”的字段的表单进行验证。在那 1.description字段不能为空 2.description字段不能少于5个字符 3.description字段不能超过60个字符。

对于我所做的验证，如果我输入 3 个字符的描述，它会显示字段为空且字段少于 5 个字符的错误消息。（超过字符限制时也会发生同样的情况）

像这样

发生这种情况时如何显示正确的错误消息？当字符限制小于 5 或超过 60 时，我只想显示“描述太短/太长”。当不包含描述时，会显示“需要描述”错误消息。

这就是我所做的

<!-- DESCRIPTION -->
        <div class="form-group" ng-class="{ 'has-error' : userForm.username.$invalid && userForm.username.$dirty && submitted || userForm.username.$invalid && userForm.username.$pristine && submitted }">
            <label>Description</label>
            <input type="text" name="username" class="form-control" ng-model="user.username"  ng-minlength="5"  ng-maxlength="60" required>
            <label><p ng-show="userForm.username.$invalid && userForm.username.$dirty && submitted || (userForm.username.$invalid && userForm.username.$pristine) && submitted  " class="help-block "><font color="#009ACD">Description is required.</font></p></label>
            <label><font color="white"><p ng-show="userForm.username.$error.minlength && submitted"  class="help-block"><font color="#009ACD">Description is too short.</font></p></label>
            <label><p ng-show="userForm.username.$error.maxlength && submitted" class="help-block"><font color="#009ACD">Description is too long.</font></p></label>
        </div>



            <div class="col"style="text-align: center">
            <button align="left"class="button button-block button-reset"  type="reset" value="Reset" style="display: inline-block;width:100px;text-align:center "
            ng-click="submitted=false" padding-top="true">Reset</button>


            <button class="button button-block button-positive"  style="display: inline-block;width:100px "
            ng-click="submitted=true" type="submit" padding-top="true">Submit</button>
            </div>

【问题讨论】：

标签： html angularjs validation

【解决方案1】：

您总是会看到“需要说明”消息，因为您依赖于 userForm.username.$invalid 属性，如果任何验证失败，该属性始终为真。

相反，您应该将其更改为与其他类似并使用userForm.username.$error.required 键。

所以你的第一个标签就变成了：

<label><p ng-show="userForm.username.$error.required && userForm.username.$dirty && submitted || (userForm.username.$error.required && userForm.username.$pristine) && submitted" class="help-block "><font color="#009ACD">Description is required.</font></p></label>

【讨论】：

我之前尝试过这种方式。但是当我使用它时，即使该字段为空，错误消息也会显示为“描述太短”

【解决方案2】：

@CrazyDroid 您可以查看此链接以对您的表单进行验证，该表单完全符合您的要求。

http://scotch.io/tutorials/javascript/angularjs-form-validation

【讨论】：

【解决方案3】：

在我看来，您的 ng-show 表达式带有“Description is required”看起来不对。尝试将其简化为：

ng-show="submitted && userForm.username.$error.required"

【讨论】：