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

发布时间:2017-05-23 06:25 来源:互联网 当前栏目:web技术类

北京快3温都水城路线 www.uqkum.tw    这篇文章主要介绍了详细解读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="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"> <style> body { padding-top:30px; } </style>   <!-- JS ===================== --> <!-- load angular --> <script src="//code.angularjs.org/1.2.6/angular.js"></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
  • 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、
  • 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、