您的位置：首页 > Web前端 > AngularJS

AngularJS表单验证（上）

2015-09-07 12:48 603 查看


构建一个ng表单

1.确保form上标签有一个name属性，像下面的例子一样。最好再加一个novalidate=”novalidate”

2.form中不能有action属性。提交交由ng-submit处理

3.每个input一定要有ng-model，最好有一个name方便引用。然后用require或者ng-minlength之类才起作用

1234<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字符。没有实际意义，只是演示例子）

1234567891011121314151617<!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解决了这个问题。我再进行更新。


表单的状态

1234567891011121314151617181920<!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当且用户是否已经修改过表单：

1formName.$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，也许你还有很多想法，但上篇已经结束了，容我整理思路，带来表单验证中篇。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航