angularjs教程

当前位置:首页>AngularJS>angularjs教程>详细解读AngularJS中的表单验证编程

详细解读AngularJS中的表单验证编程

时间:2015-06-23 10:07来源:网络整理 作者:KKWL 点击:
您现在的位置:首页>教程>编程开发> > 详细解读AngularJS中的表单验证编程 详细解读AngularJS中的表单验证编程 感谢 3lian8 的投递 时间:2015-06-22 来源:三联 这篇文章主要介绍了详细解读

  您现在的位置:首页 > 教程 > 编程开发 >  > 详细解读AngularJS中的表单验证编程

详细解读AngularJS中的表单验证编程

感谢 3lian8 的投递 时间:2015-06-22 来源:三联 

   这篇文章主要介绍了详细解读AngularJS中的表单验证编程,AngularJS是一个非常热门的JavaScript库,需要的朋友可以参考下

  需求

  Name 必填

  Username 非必填,最小长度3,最大长度8

  Email 非必填,但必须是合法的email

  验证未通过的表单不能提交

  显示一个必填或者非法email格式的错误信息

  如果正确提交就弹出一个祝贺信息

  现在知道我们的目标了吧,让我们一起来构建这个东西吧.

  Angular 的表单属性 $valid, $invalid, $pristine, $dirty

  Angular 提供了有关表单的属性来帮助我们验证表单. 他们给我们提供了各种有关一个表单及其输入的信息,并且应用到了表单和输入.

  属性类

  描述

  $valid ng-valid Boolean 告诉我们这一项当前基于你设定的规则是否验证通过

  $invalid ng-invalid Boolean 告诉我们这一项当前基于你设定的规则是否验证未通过

  $pristine ng-pristine Boolean 如果表单或者输入框没有使用则为True

  $dirty ng-dirty Boolean 如果表单或者输入框有使用到则为True

  Angular 也提供了有关表单及其输入框的类,以便你能够依据每一个状态设置其样式.

  访问表单属性

  方位表单:

  .

  访问一个输入框: ..

  设置我们的表单

  我们将使用一个简单的表单来做演示.

201561995404669.png (765×364)

  我们将需要两个文件:

  index.html 我们用来显示表单的代码

  app.js 我们的Angular应用程序和控制器 (几乎没有任何代码)

  Our Form Code index.html

  ?

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

45

46

47

48

49

50

51

52

53

54

55

56

<!-- index.html -->

<!DOCTYPE html>

<html>

<head>

<!-- CSS ===================== -->

<!-- load bootstrap -->

<link rel="stylesheet" href="">

<style>

body { padding-top:30px; }

</style>

 

<!-- JS ===================== -->

<!-- load angular -->

<script src=""></script>

<script src="app.js"></script>

</head>

 

<!-- apply angular app and controller to our body -->

<body ng-app="validationApp" ng-controller="mainController">

<div class="container">

<div class="col-sm-8 col-sm-offset-2">

 

<!-- PAGE HEADER -->

<div class="page-header"><h1>AngularJS Form Validation</h1></div>

 

<!-- FORM -->

<!-- pass in the variable if our form is valid or invalid -->

<form name="userForm" ng-submit="submitForm(userForm.$valid)" novalidate> <!-- novalidate prevents HTML5 validation since we will be validating ourselves -->

 

<!-- NAME -->

<div class="form-group">

<label>Name</label>

<input type="text" name="name" class="form-control" ng-model="name" required>

</div>

 

<!-- USERNAME -->

<div class="form-group">

<label>Username</label>

<input type="text" name="username" class="form-control" ng-model="user.username" ng-minlength="3" ng-maxlength="8">

</div>

 

<!-- EMAIL -->

<div class="form-group">

<label>Email</label>

<input type="email" name="email" class="form-control" ng-model="email">

</div>

 

<!-- SUBMIT BUTTON -->

<button type="submit" class="btn btn-primary">Submit</button>

 

</form>

 

</div><!-- col-sm-8 -->

</div><!-- /container -->

</body>

</html>

  这里列出了一些关键点:

  novalidate: 它将会组织默认的HTML5验证,因为这会由我们自己来做(我们自己的将会更棒)

  我们在输入框上应用了ng-model,以便将来自表单的数据绑定到angular变量

  username上的ng-minlength 和 ng-maxlength会自己创建其规则

  name 输入框是必填的

  email 输入框有属性 type=”email”

  验证规则

  Angular 有很多验证规则,像是 tong-min leng than dng-max length.

  Angular还可以自己配置规则. Angular输入指引上有说明 .

  ?

1

2

3

4

5

6

7

8

9

10

<input

ng-model="{ string }"

name="{ string }"

required

ng-required="{ boolean }"

ng-minlength="{ number }"

ng-maxlength="{ number }"

ng-pattern="{ string }"

ng-change="{ string }">

</input>

  现在建好了表单, 接着创建Angular应用和控制器,ng-app ng-控制器.

  应用的 Codeapp.js

  ?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

// app.js

// create angular app

var validationApp = angular.module('validationApp', []);

 

// create angular controller

validationApp.controller('mainController', function($scope) {

 

// function to submit the form after all validation has occurred

$scope.submitForm = function(isValid) {

 

// check to make sure the form is completely valid

if (isValid) {

alert('our form is amazing');

}

 

};

 

});

  使HTML5验证器的novalidate

------分隔线----------------------------