AngularJS validation with messages

    接着上次的AngularJS remote validation,在表单验证中,我们有各种规则,eg:required,minlength,maxlength这些是H5提供的属性,AngularJS提供了ng-pattern用于正则表达式,一个表单有N个验证规则,那么我们如何进行不同提示信息的展示呢。

    0如果只是一种验证规则,我们可以简单的实现:

<div ng-show="form.$invalid">validation message</div>

    1如果是多个验证规则,通过这种方式,我们拿不到具体未通过的验证规则,所以采用AngularJS提供的angular-    messagers,(当然,并不是说angular-messagers只有这一个应用场景)参考:AngularJS-ngMessages

0在加载模块时,添加:
    angular.module('angularJS', 
		['ngMessages']);

1信息提示代码:
<form name="myForm">
  <label>
    Enter your name:    <input type="text"
           name="myName"
           ng-model="name"
           ng-minlength="5"
           ng-maxlength="20"
           required />
  </label>
  <pre>myForm.myName.$error = {{ myForm.myName.$error | json }}</pre>

  <div ng-messages="myForm.myName.$error" style="color:maroon" role="alert">
    <div ng-message="required">You did not enter a field</div>
    <div ng-message="minlength">Your field is too short</div>
    <div ng-message="maxlength">Your field is too long</div>
  </div>
</form>



你可能感兴趣的:(AngularJS,validation,with,messages)