Angular 表单验证

模板驱动验证

使用模板驱动验证需要依赖于原生的HTML表单验证器 Angular 会用指令来匹配具有验证功能的这些属性。

原生的HTMl验证器主要分两种

  1. 通过语义类型来进行定义
  2. 通过验证相关的属性来进行定义

语义类型

Input type Constraint description Associated violation
The value must be an absolute URL, as defined in the URL Living Standard. TypeMismatch constraint violation
The value must be a syntactically valid email address, which generally has the format username@hostname.tld. TypeMismatch constraint violation

 验证相关属性

Attribute Input types supporting the attribute Possible values Constraint description Associated violation
pattern text, search, url, tel, email, password A JavaScript regular expression (compiled with the ECMAScript 5 global, ignoreCase, and multiline flags disabled) The value must match the pattern. patternMismatch constraint violation
min range, number A valid number The value must be greater than or equal to the value. rangeUnderflow constraint violation
date, month, week A valid date
datetime, datetime-local, time A valid date and time
max range, number A valid number The value must be less than or equal to the value rangeOverflow constraint violation
date, month, week A valid date
datetime, datetime-local, time A valid date and time
required text, search, url, tel, email, password, date, datetime, datetime-local, month, week, time, number, checkbox, radio, file; also on the