AngularJS 表单验证

1. Email 并不需要使用正则ng-pattern, 直接使用Type便可以为其指明该用什么验证。

1 Email: </td><td><input name="email" type="email" ng-model="email" length="100" required>
2 <span style="color:red" ng-show="studentForm.email.$dirty && studentForm.email.$invalid">
3       <span ng-show="studentForm.email.$error.required">Email 必填~.</span>
4       <span ng-show="studentForm.email.$error.email">无效的Email地址.</span>
5 </span>

 

2.

  • button 标签中ng-disabled的值来自上面标签input中的 ng-model， 所以当checkbox被勾选之后，下面标签的ng-disabled的值便是true， 如果没有被勾选，则是false。（自我猜测so far)
  • ng-show, ng-hide, 同ng-disabled 相类似。
  • ng-click 用来更新对于的model对象。
 1 <tr>
 2    <td><input type="checkbox" ng-model="enableDisableButton">Disable Button</td>
 3    <td><button ng-disabled="enableDisableButton">点击我!</button></td>
 4 </tr>
 5 <tr>
 6    <td><input type="checkbox" ng-model="showHide1">显示按钮</td>
 7    <td><button ng-show="showHide1">Click Me!</button></td>
 8 </tr>
 9 <tr>
10    <td><input type="checkbox" ng-model="showHide2">隐藏按钮</td>
11    <td><button ng-hide="showHide2">Click Me!</button></td>
12 </tr>
13 <tr>
14    <td><p>Total click: {{ clickCounter }}</p></td>
15    <td><button ng-click="clickCounter = clickCounter + 1">点击我!</button></td>
16 </tr>

3. 表单验证关键字。

  • $dirty - 状态指示值已被改变

  • $invalid- 指示值的状态是无效的

  • $error- 指出确切的错误

posted @ 2015-10-21 17:47  Frank.Hu  阅读(51)  评论(0)    收藏  举报