构建一个ng表单
1.确保form上标签有一个name属性,像下面的例子一样。最好再加一个novalidate=”novalidate”
2.form中不能有action属性。提交交由ng-submit处理
3.每个input一定要有ng-model,最好有一个name方便引用。然后用require或者ng-minlength之类才起作用
1
2
3
4
|
<
form
name
=
"form"
novalidate
=
"novalidate"
>
<
label
name
=
"email"
>
Your
email
<
/
label
>
<
input
type
=
"email"
name
=
"email"
ng
-
model
=
"email"
placeholder
=
"Email Address"
/
>
<
/
form
>
|
ng默认提供了验证
验证是否已输入文字,只需在标签上加上required:
1
|
<
input
type
=
"text"
ng
-
model
=
"user.name"
required
/
>
|
验证至少输入{number}个字符,使用指令ng-minlength=“{number}”:
1
|
<
input
type
=
"text"
ng
-
model
=
"user.name"
ng
-
minlength
=
"5"
/
>
|
验证至多输入{number}个字符,使用指令ng-maxlength=“{number}”:
1
|
<
input
type
=
"text"
ng
-
model
=
"user.name"
ng
-
maxlength
=
"20"
/
>
|
确保输入匹配一个正则表达式,使用指令ng-pattern="/PATTERN/"
:
1
|
<
input
type
=
"text"
ng
-
model
=
"user.name"
ng
-
pattern
=
"/a-zA-Z/"
/
>
|
验证输入是一个Email,设置input的type属性为email:
1
|
<
input
type
=
"email"
name
=
"email"
ng
-
model
=
"user.email"
/
>
|
验证输入是一个数字,设置input的type属性为number:
1
|
<
input
type
=
"number"
name
=
"number"
ng
-
model
=
"user.age"
/
>
|
验证输入是一个URL,设置input的type属性为url
1
|
<
input
type
=
"url"
name
=
"homepage"
ng
-
model
=
"user.weburl"
/
>
|
实战一个例子(需要验证一个email为发须并且最小为10,最长为20,并且并须要含有m字符。没有实际意义,只是演示例子)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<
!
doctype
html
>
<
html
ng
-
app
=
"myApp"
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
title
>表单
<
/
title
>
<
/
head
>
<
body
>
<
form
name
=
"form"
novalidate
=
"novalidate"
>
<
input
type
=
"email"
ng
-
model
=
"user.email"
ng
-
minlength
=
"5"
ng
-
maxlength
=
"20"
ng
-
pattern
=
"/m.*/"
required
/
>
<
input
type
=
"submit"
value
=
"确定"
/
>
<
/
form
>
<script
src
=
"http://cdn.staticfile.org/angular.js/1.3.0-beta.8/angular.min.js"
>
</script>
<script>
var
myApp
=
angular
.
module
(
'myApp'
,
[
]
)
;
</script>
<
/
body
>
<
/
html
>
|
运行这个例子先啥都不做,查看元素
注意看这些标出来的东西有点意思。然后输入字符就能看到他们的进行变化。然后我来解释一下这些东西。(可以看到一开始required就为ng-invalid-required。但其他的都为valid)
验证的时候感觉好像出现一个bug.具体如下:(如有知道的请帮助一下解释一下这个问题)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<
!
doctype
html
>
<
html
ng
-
app
=
"myApp"
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
title
>表单
<
/
title
>
<
/
head
>
<
body
>
<
form
name
=
"form"
novalidate
=
"novalidate"
>
<
input
type
=
"email"
ng
-
model
=
"user.email"
ng
-
minlength
=
"5"
ng
-
maxlength
=
"20"
ng
-
pattern
=
"/m.*/"
required
/
>
<
input
type
=
"email"
ng
-
model
=
"user.email2"
required
/
>
<
input
type
=
"submit"
value
=
"确定"
/
>
<
/
form
>
<script
src
=
"http://cdn.staticfile.org/angular.js/1.3.0-beta.8/angular.min.js"
>
</script>
<script>
var
myApp
=
angular
.
module
(
'myApp'
,
[
]
)
;
</script>
<
/
body
>
<
/
html
>
|
第一个例子的email居然ng-valid-email。感觉有点问题。难道是用了type=”email”之类就不能用ng-minlength ng-pattern之类了吗?觉得可能是ng版本问题,但换了低版本之后发现同样有问题。希望有人能解释一下这个问题。github有这个问题 https://github.com/angular/angular.js/issues/7849 而且email验证的时候github上有人提出了其他问题,https://github.com/angular/angular.js/issues/5899,看来对于type=”email”和 url之类要使用的时候多注意,我的建议是尽量不用。如果需要请写自定义验证。下面我会介绍,确实是有够蛋疼之处。由于这种问题,所以我写的表单不会出现type=”email” type=”url” type=”number”之类,如果ng解决了这个问题。我再进行更新。
表单的状态
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<
!
doctype
html
>
<
html
ng
-
app
=
"myApp"
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
title
>表单
<
/
title
>
<
/
head
>
<
body
>
<
form
name
=
"form"
>
<
input
type
=
"text"
name
=
"name"
ng
-
model
=
"user.name"
required
ng
-
minlength
=
"5"
ng
-
maxlength
=
"20"
/
>
<
input
type
=
"text"
name
=
"email"
ng
-
model
=
"user.email"
required
ng
-
pattern
=
"/^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/"
/
>
<
/
form
>
{
{
a
}
}
<script
src
=
"http://cdn.staticfile.org/angular.js/1.3.0-beta.8/angular.min.js"
>
</script>
<script>
var
myApp
=
angular
.
module
(
'myApp'
,
[
]
)
;
</script>
<
/
body
>
<
/
html
>
|
我们把焦点只聚积到表单(class有如下属性ng-pristine ng-invalid ng-invalid-required),如果变动在第一个输入框中输入s,现在class就变了ng-invalid ng-invalid-required ng-dirty ng-invalid-minlength
现在需要解释一些东西了
AngularJS将DOM验证的结果保存在$scope对象中。这使我们能够实时做出一些处理。提供给我们的属性有:
$pristine表示用户是否修改了表单。如果为ture,表示没有修改过:
1
|
formName
.
$
pristine
;
|
$dirty当且用户是否已经修改过表单:
1
|
formName
.
$
dirty
|
我们来直观的看下
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<
!
doctype
html
>
<
html
ng
-
app
=
"myApp"
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
title
>表单
<
/
title
>
<
/
head
>
<
body
>
<
div
ng
-
controller
=
"testController"
>
<
form
name
=
"form"
>
<
input
type
=
"text"
name
=
"name"
ng
-
model
=
"user.name"
required
ng
-
minlength
=
"5"
ng
-
maxlength
=
"20"
/
>
<
input
type
=
"text"
name
=
"email"
ng
-
model
=
"user.email"
required
ng
-
pattern
=
"/^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/"
/
>
<
/
form
>
<
button
ng
-
click
=
"getFormStatus()"
>查看表单状态
<
/
button
>
<
/
div
>
<script
src
=
"http://cdn.staticfile.org/angular.js/1.3.0-beta.8/angular.min.js"
>
</script>
<script>
var
myApp
=
angular
.
module
(
'myApp'
,
[
]
)
;
myApp
.
controller
(
'testController'
,
function
(
$
scope
)
{
$
scope
.
getFormStatus
=
function
(
)
{
console
.
log
(
$
scope
.
form
)
;
}
}
)
</script>
<
/
body
>
<
/
html
>
|
如果表单进行变动的时候,可以看到表单的一些属性进行了实时的变化。观察上面四个,你不难发现。$dirty和$valid是相反的,一个true,一个false或者一个false一个true,同样$valid,是得到现在是否通过验证的和$invalid也是相反的。
表单的部分说的差不多了,然后说表单中的每项的东西
可以看到每个表单项也有跟表单有些共同的属性,注意一下$error对象,记录了是哪个出现错误正确的。
实战简单实例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
|
<
!
doctype
html
>
<
html
ng
-
app
=
"myApp"
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
title
>表单
<
/
title
>
<style>
/*在修改的表单项上才显示错误信息*/
input.ng-dirty.ng-invalid
{
border
:
1px
solid
red
;
}
</style>
<
/
head
>
<
body
>
<
div
ng
-
controller
=
"testController"
>
<
form
name
=
"form"
ng
-
submit
=
"save()"
novalidate
=
"novalidate"
>
<
input
type
=
"text"
name
=
"name"
ng
-
model
=
"user.name"
required
ng
-
minlength
=
"5"
ng
-
maxlength
=
"20"
/
>
<
span
class
=
"error"
ng
-
show
=
"form.$dirty && form.name.$invalid"
>填写不正确
<
/
span
>
<
br
/
>
<
input
type
=
"text"
name
=
"email"
ng
-
model
=
"user.email"
required
ng
-
pattern
=
"/^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/"
/
>
<
span
class
=
"error"
ng
-
show
=
"form.$dirty && form.name.$invalid"
>填写格式错误
<
/
span
>
<
br
/
>
<
input
type
=
"submit"
value
=
"提交"
/
>
<
/
form
>
<
/
div
>
<script
src
=
"http://cdn.staticfile.org/angular.js/1.3.0-beta.8/angular.min.js"
>
</script>
<script>
var
myApp
=
angular
.
module
(
'myApp'
,
[
]
)
;
myApp
.
controller
(
'testController'
,
function
(
$
scope
)
{
$
scope
.
save
=
function
(
)
{
//获取到表单是否验证通过
if
(
$
scope
.
form
.
$
valid
)
{
alert
(
'通过验证可以提交表单'
)
;
}
else
{
alert
(
'表单没有通过验证'
)
;
}
}
}
)
</script>
<
/
body
>
<
/
html
>
|
显示效果如图,当然有人有疑问了,比如第一个表单项,我不想提示填写不正确这么模糊的说法,而是告诉他是不是因为他没有填写,或者是因为他字符不够,或者是因为你超过了最大字符。这也非常好办,还记的$error吗?可以通过form.name.$error.minlength之类的得到啊。明白了不。还是不明白,好吧,再给逗逼做个代码实例
也许你稍为有些思路了。但还是很多时候力不从心,比如哥想自定义验证或者通过后台验证unique呢?再比如他这个一边输入一边就提示效果太他妈差了。我想在提交时提示或者我想在鼠标不在这个焦点的时候再提示。OK,也许你还有很多想法,但上篇已经结束了,容我整理思路,带来表单验证中篇。