重温AngularJS（十）-- 表单、输入验证

关联目录索引：
重温AngularJS（一）-- 表达式、指令
重温AngularJS（二）-- 模型ng-model指令
重温AngularJS（三）-- Scope(作用域)
重温AngularJS（四）-- 控制器ng-controller
重温AngularJS（五）-- 过滤器
重温AngularJS（六）-- 服务Service
重温AngularJS（七）-- Select(选择框)、表格
重温AngularJS（八）-- 事件
重温AngularJS（九）-- 模块、全局API
重温AngularJS（十）-- 表单、输入验证
重温AngularJS（十一）-- 包含、动画
重温AngularJS（十二）-- 依赖注入（5个核心组件）
重温AngularJS（十三）-- 路由

作者：Zyao89；转载请保留此行，谢谢；

---

AngularJS 表单是输入控件的集合。

HTML 控件

以下 HTML input 元素被称为 HTML 控件:

• input 元素
• select 元素
• button 元素
• textarea 元素

HTML 表单

HTML 表单通常与 HTML 控件同时存在。

AngularJS 表单实例

  

    First Name:

    

    Last Name:

    
    


    RESET
  
  
form = {{user}}
  
master = {{master}}

novalidate 属性是在 HTML5 中新增的。禁用了使用浏览器的默认验证。

分析：
ng-app 指令定义了 AngularJS 应用。
ng-controller 指令定义了应用控制器。
ng-model 指令绑定了两个 input 元素到模型的 user 对象。
formCtrl 函数设置了 master 对象的初始值，并定义了 reset() 方法。
reset() 方法设置了 user 对象等于 master 对象。
ng-click 指令调用了 reset() 方法，且在点击按钮时调用。
novalidate 属性在应用中不是必须的，但是你需要在 AngularJS 表单中使用，用于重写标准的 HTML5 验证。

---

输入验证

AngularJS 表单和控件可以验证输入的数据。

Validation Example



用户名:

  
  
  用户名是必须的。
  


邮箱:

  
  
  邮箱是必须的。
  非法的邮箱。
  



  

栗子结果

分析：
AngularJS ng-model 指令用于绑定输入元素到模型中。
模型对象有两个属性： user 和 email。
我们使用了 ng-show 指令， color:red 在邮件是 $dirty 或 $invalid 才显示。

属性	描述
$dirty	表单有填写记录
$valid	字段内容合法的
$invalid	字段内容是非法的
$pristine	表单没有填写记录