AngularJS笔记整理 表单验证基础教程

 

FORM表单

备注

---

 

1. 使用指令必须添加name ，并添加novalidate 禁用浏览器原生的验证条件
2. input表单域中添加的验证的选项 （required Minimum length Maximum length Matches a pattern Email Number Url）

 

Matches a pattern 正则匹配

匹配某个正则表达式 

<input type="text" ng-pattern="/a-zA-Z/" />

 

 

---

 

AngularJS 表单验证属性

 

 

 实列解析

---

 

一个简单的表单验证

用户名   必填

<input type="text" name="userName" ng-model="entity.userName"  ng-required>

邮箱      必填，符合邮箱格式

<input type="email" name="email" ng-model="entity.email"  ng-required>

 

form 表单验证不合法时，显示错误信息（邮箱同理）

<input type="text" name="userName" ng-required>
<div ng-show="form.userName.$dirty && form.userName.$invalid">

<span ng-show="form.userName.$error.required">请填写姓名</span>
</div>

 

  ng-required：必填

  type="email" 必须符合邮件格式

在验证没有通过的情况下，禁用提交按钮 通过设置disabled属性实现

<button type="submit" ng-disabled="form.$invalid">确定</button>

 

form.$invalid 当form不合法时，disabled