angularjs验证问题的形式

我试图做一个表单验证，其中包含一个名为“description”的字段。在该 1.description字段不能为空 2.description字段不能少于5个字符 3.描述字段不能超过60个字符。angularjs验证问题的形式

对于验证我已经完成，如果我输入3字符的描述中，示出了既用于字段为空，并且字段中的错误消息具有小于5个字符。

这样的（超过字符的限制时发生同样的情况）

enter image description here

我怎么能显示正确的错误消息，当出现这种情况？当字符限制小于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>

来源

2014-09-29 CraZyDroiD

你总是看到，因为你是依靠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>

来源

2014-09-29 09:29:32 GregL

我早点试过这种方法。但是当我使用该字段时，即使该字段为空，错误消息也会显示为“描述太短” – CraZyDroiD 2014-09-29 09:36:52

感谢它的工作！ – CraZyDroiD 2014-09-29 10:31:43

@CrazyDroid你可以看看这个链接有你的形式完全与您的要求一致的验证。

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

来源

2014-09-29 09:45:08

用在你的NG-节目表达 “说明需要” 看起来我错了。尝试将其简化为：

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

来源

2014-09-29 10:19:57 Fordio

谢谢你的工作。谢谢你为了简化它 – CraZyDroiD 2014-09-29 10:32:09

angularjs验证问题的形式

回答

相关问题