表单状态及验证

1. 理论知识

• $invalid: 一旦表单没有验证通过，AngularJS就会为表单设置为$invalid属性
• 验证器（用来验证表单）

1. ng-required
2. ng-minlength
3. type="email"
4. type="url"
5. type="date"
6. 等等

• 验证后的结果状态(boolean类型)。一般是$error.email或者$error.minlength

1. $invalid
2. email
3. minlength
4. 等等

• 验证后的结果状态 对应的 css class

1. $invalid--> ng-invalid
2. email --> ng-valid-email / ng-invalid-email
3. minlength --> ng-valid-minlength / ng-invalid-minlength

2. error_msg.html

  


    
    
    
    
    
    

    
    

    




    

        username: 
        
                最小长度为4
        


        email: 
        
                邮箱格式出错
        


        password: 
        


        重置为初始数据
        
    

3. 展示页面

错误email格式，无法提交

正确格式，可以点击提交

4. 解析

• 表单校验器: ng-minlength="4"
• 校验状态结果: myform.uname.$error.minlength
• css对应状态结果表示：
  1. .username.ng-dirty.ng-invalid-minlength
  2. .username.ng-valid