AngularJS 中文手册
目录搜索
提交中...

©
本文档使用 php.cn手册 发布

文字
分享

AngularJS: API: ng/directive/input[email]

input[email]

  1. - input in module ng

Email格式的文本输入验证。如果验证结果不是有效的email地址，则设置 email 验证错误键。

指令信息

  • 这个指令执行优先级为0.

用法

1

2

3

4

5

6

7

8

9

<code style="box-sizing:border-box;font-family:Menlo, Monaco, Consolas, &apos;Courier New&apos;, monospace;font-size:inherit;padding:0px;color:inherit;background-color:transparent;white-space:pre-wrap;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;"><span style="box-sizing:border-box;color:navy;"><input</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"> </span><span style="box-sizing:border-box;color:teal;">Type</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">=</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">"email"</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">

       </span><span style="box-sizing:border-box;color:teal;">ng-model</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">=</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">""</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">

       [</span><span style="box-sizing:border-box;color:teal;">name</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">=</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">""</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">]

       [</span><span style="box-sizing:border-box;color:teal;">required</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">=</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">""</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">]

       [</span><span style="box-sizing:border-box;color:teal;">ng-required</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">=</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">""</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">]

       [</span><span style="box-sizing:border-box;color:teal;">ng-minlength</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">=</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">""</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">]

       [</span><span style="box-sizing:border-box;color:teal;">ng-maxlength</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">=</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">""</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">]

       [</span><span style="box-sizing:border-box;color:teal;">ng-pattern</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">=</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">""</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">]

       [</span><span style="box-sizing:border-box;color:teal;">ng-change</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">=</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">""</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">]</span><span style="box-sizing:border-box;color:navy;">></span></code>

参数

参数 类型 详述
ngModel string

声明用于数据绑定的Angular表达式。
name
(可选)
 string

发布到表单下的控件的属性名称。
required
(可选)
 string

如果未输入值就设置 required 验证错误键。
ngRequired
(可选)
 string

当ngRequired表达式等于true时，添加required属性和required验证约束到元素上。 使用ngRequired替换required，当你想数据绑定到required属性上时。
ngMinlength
(可选)
 number

如果值短于minlength则设置 minlength 验证错误键。
ngMaxlength
(可选)
 number

如果值长于maxlength则设置 maxlength 验证错误键。
ngPattern
(可选)
 string

如果值不匹配正则表达式则设置 pattern 验证错误键。 值可以是 /regexp/ 形式的内嵌正则表达式，或者是用 regexp 定义在scope中的表达式。
ngChange
(可选)
 string

Angular表达式，当输入元素通过用户交互方式发生输入变化时会执行这个表达式。

示例

index.html

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

<code style="box-sizing:border-box;font-family:Menlo, Monaco, Consolas, &apos;Courier New&apos;, monospace;font-size:inherit;padding:0px;color:inherit;background-color:transparent;white-space:pre-wrap;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;"><span style="box-sizing:border-box;color:navy;"><script></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">

angular</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">.</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">module</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">(</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">'emailExample'</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">,</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"> </span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">[])</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">

  </span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">.</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">controller</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">(</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">'ExampleController'</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">,</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"> </span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">[</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">'$scope'</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">,</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"> </span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">Function</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">(</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">$scope</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">)</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"> </span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">{</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">

    $scope</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">.</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">text </span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">=</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"> </span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">'me@example.com'</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">;</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">

  </span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">}]);</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"></span><span style="box-sizing:border-box;color:navy;">

</script>

</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"></span><span style="box-sizing:border-box;color:navy;"><form</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"> </span><span style="box-sizing:border-box;color:teal;">name</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">=</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">"myForm"</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"> </span><span style="box-sizing:border-box;color:teal;">ng-controller</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">=</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">"ExampleController"</span><span style="box-sizing:border-box;color:navy;">></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">

  Email: </span><span style="box-sizing:border-box;color:navy;"><input</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"> </span><span style="box-sizing:border-box;color:teal;">Type</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">=</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">"email"</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"> </span><span style="box-sizing:border-box;color:teal;">name</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">=</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">"input"</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"> </span><span style="box-sizing:border-box;color:teal;">ng-model</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">=</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">"text"</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"> </span><span style="box-sizing:border-box;color:teal;">required</span><span style="box-sizing:border-box;color:navy;">></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">

  </span><span style="box-sizing:border-box;color:navy;"><span</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"> </span><span style="box-sizing:border-box;color:teal;">class</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">=</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">"error"</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"> </span><span style="box-sizing:border-box;color:teal;">ng-show</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">=</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">"myForm.input.$error.required"</span><span style="box-sizing:border-box;color:navy;">></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">

    Required!</span><span style="box-sizing:border-box;color:navy;"></span></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">

  </span><span style="box-sizing:border-box;color:navy;"><span</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"> </span><span style="box-sizing:border-box;color:teal;">class</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">=</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">"error"</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"> </span><span style="box-sizing:border-box;color:teal;">ng-show</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">=</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">"myForm.input.$error.email"</span><span style="box-sizing:border-box;color:navy;">></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">

    Not valid email!</span><span style="box-sizing:border-box;color:navy;"></span></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">

  </span><span style="box-sizing:border-box;color:navy;"><tt></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">text = {{text}}</span><span style="box-sizing:border-box;color:navy;"></tt><br/></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">

  </span><span style="box-sizing:border-box;color:navy;"><tt></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">myForm.input.$valid = {{myForm.input.$valid}}</span><span style="box-sizing:border-box;color:navy;"></tt><br/></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">

  </span><span style="box-sizing:border-box;color:navy;"><tt></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">myForm.input.$error = {{myForm.input.$error}}</span><span style="box-sizing:border-box;color:navy;"></tt><br/></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">

  </span><span style="box-sizing:border-box;color:navy;"><tt></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">myForm.$valid = {{myForm.$valid}}</span><span style="box-sizing:border-box;color:navy;"></tt><br/></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">

  </span><span style="box-sizing:border-box;color:navy;"><tt></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">myForm.$error.required = {{!!myForm.$error.required}}</span><span style="box-sizing:border-box;color:navy;"></tt><br/></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">

  </span><span style="box-sizing:border-box;color:navy;"><tt></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">myForm.$error.email = {{!!myForm.$error.email}}</span><span style="box-sizing:border-box;color:navy;"></tt><br/>

</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"></span><span style="box-sizing:border-box;color:navy;"></form></span></code>

protractor.js

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

<code style="box-sizing: border-box; font-size: inherit; padding: 0px; color: inherit; background-color: transparent; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px;"><span style="box-sizing: border-box;">var</span><span style="box-sizing: border-box;"> text </span><span style="box-sizing: border-box;">=</span><span style="box-sizing: border-box;"> element</span><span style="box-sizing: border-box;">(</span><span style="box-sizing: border-box;">by</span><span style="box-sizing: border-box;">.</span><span style="box-sizing: border-box;">binding</span><span style="box-sizing: border-box;">(</span><span style="box-sizing: border-box; color: rgb(221, 17, 68);">'text'</span><span style="box-sizing: border-box;">));

</span><span style="box-sizing: border-box;">var</span><span style="box-sizing: border-box;"> valid </span><span style="box-sizing: border-box;">=</span><span style="box-sizing: border-box;"> element</span><span style="box-sizing: border-box;">(</span><span style="box-sizing: border-box;">by</span><span style="box-sizing: border-box;">.</span><span style="box-sizing: border-box;">binding</span><span style="box-sizing: border-box;">(</span><span style="box-sizing: border-box; color: rgb(221, 17, 68);">'myForm.input.$valid'</span><span style="box-sizing: border-box;">));

</span><span style="box-sizing: border-box;">var</span><span style="box-sizing: border-box;"> input </span><span style="box-sizing: border-box;">=</span><span style="box-sizing: border-box;"> element</span><span style="box-sizing: border-box;">(</span><span style="box-sizing: border-box;">by</span><span style="box-sizing: border-box;">.</span><span style="box-sizing: border-box;">model</span><span style="box-sizing: border-box;">(</span><span style="box-sizing: border-box; color: rgb(221, 17, 68);">'text'</span><span style="box-sizing: border-box;">));</span><span style="box-sizing: border-box;">

 

it</span><span style="box-sizing: border-box;">(</span><span style="box-sizing: border-box; color: rgb(221, 17, 68);">'should initialize to model'</span><span style="box-sizing: border-box;">,</span><span style="box-sizing: border-box;"> </span><span style="box-sizing: border-box;">Function</span><span style="box-sizing: border-box;">()</span><span style="box-sizing: border-box;"> </span><span style="box-sizing: border-box;">{</span><span style="box-sizing: border-box;">

  expect</span><span style="box-sizing: border-box;">(</span><span style="box-sizing: border-box;">text</span><span style="box-sizing: border-box;">.</span><span style="box-sizing: border-box;">getText</span><span style="box-sizing: border-box;">()).</span><span style="box-sizing: border-box;">toContain</span><span style="box-sizing: border-box;">(</span><span style="box-sizing: border-box; color: rgb(221, 17, 68);">'me@example.com'</span><span style="box-sizing: border-box;">);</span><span style="box-sizing: border-box;">

  expect</span><span style="box-sizing: border-box;">(</span><span style="box-sizing: border-box;">valid</span><span style="box-sizing: border-box;">.</span><span style="box-sizing: border-box;">getText</span><span style="box-sizing: border-box;">()).</span><span style="box-sizing: border-box;">toContain</span><span style="box-sizing: border-box;">(</span><span style="box-sizing: border-box; color: rgb(221, 17, 68);">'true'</span><span style="box-sizing: border-box;">);</span><span style="box-sizing: border-box;">});</span><span style="box-sizing: border-box;">

 

it</span><span style="box-sizing: border-box;">(</span><span style="box-sizing: border-box; color: rgb(221, 17, 68);">'should be invalid if empty'</span><span style="box-sizing: border-box;">,</span><span style="box-sizing: border-box;"> </span><span style="box-sizing: border-box;">Function</span><span style="box-sizing: border-box;">()</span><span style="box-sizing: border-box;"> </span><span style="box-sizing: border-box;">{</span><span style="box-sizing: border-box;">

  input</span><span style="box-sizing: border-box;">.</span><span style="box-sizing: border-box;">clear</span><span style="box-sizing: border-box;">();</span><span style="box-sizing: border-box;">

  input</span><span style="box-sizing: border-box;">.</span><span style="box-sizing: border-box;">sendKeys</span><span style="box-sizing: border-box;">(</span><span style="box-sizing: border-box; color: rgb(221, 17, 68);">''</span><span style="box-sizing: border-box;">);</span><span style="box-sizing: border-box;">

  expect</span><span style="box-sizing: border-box;">(</span><span style="box-sizing: border-box;">text</span><span style="box-sizing: border-box;">.</span><span style="box-sizing: border-box;">getText</span><span style="box-sizing: border-box;">()).</span><span style="box-sizing: border-box;">toEqual</span><span style="box-sizing: border-box;">(</span><span style="box-sizing: border-box; color: rgb(221, 17, 68);">'text ='</span><span style="box-sizing: border-box;">);</span><span style="box-sizing: border-box;">

  expect</span><span style="box-sizing: border-box;">(</span><span style="box-sizing: border-box;">valid</span><span style="box-sizing: border-box;">.</span><span style="box-sizing: border-box;">getText</span><span style="box-sizing: border-box;">()).</span><span style="box-sizing: border-box;">toContain</span><span style="box-sizing: border-box;">(</span><span style="box-sizing: border-box; color: rgb(221, 17, 68);">'false'</span><span style="box-sizing: border-box;">);</span><span style="box-sizing: border-box;">});</span><span style="box-sizing: border-box;">

 

it</span><span style="box-sizing: border-box;">(</span><span style="box-sizing: border-box; color: rgb(221, 17, 68);">'should be invalid if not email'</span><span style="box-sizing: border-box;">,</span><span style="box-sizing: border-box;"> </span><span style="box-sizing: border-box;">Function</span><span style="box-sizing: border-box;">()</span><span style="box-sizing: border-box;"> </span><span style="box-sizing: border-box;">{</span><span style="box-sizing: border-box;">

  input</span><span style="box-sizing: border-box;">.</span><span style="box-sizing: border-box;">clear</span><span style="box-sizing: border-box;">();</span><span style="box-sizing: border-box;">

  input</span><span style="box-sizing: border-box;">.</span><span style="box-sizing: border-box;">sendKeys</span><span style="box-sizing: border-box;">(</span><span style="box-sizing: border-box; color: rgb(221, 17, 68);">'xxx'</span><span style="box-sizing: border-box;">);</span><span style="box-sizing: border-box;">

 

  expect</span><span style="box-sizing: border-box;">(</span><span style="box-sizing: border-box;">valid</span><span style="box-sizing: border-box;">.</span><span style="box-sizing: border-box;">getText</span><span style="box-sizing: border-box;">()).</span><span style="box-sizing: border-box;">toContain</span><span style="box-sizing: border-box;">(</span><span style="box-sizing: border-box; color: rgb(221, 17, 68);">'false'</span><span style="box-sizing: border-box;">);</span><span style="box-sizing: border-box;">});</span></code>

上一篇：ng/directive/input[dateTimeLocal]下一篇：ng/directive/input[month]