【15】AngularJS 输入验证

AngularJS 输入验证


AngularJS
表单和控件可以说明输入的数码。


输入验证

AngularJS
表单和控件可以供验证功能,并对用户输入的伪数据开展警示。

 

  客户端的验证不能确保用户输入数据的安全,所以服务端的数据验证也是必须的。

采用代码

  1. <!DOCTYPE html>
  2. <html lang="zh-cn">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="renderer" content="webkit">
  6. <!--360,以webkit内核进行渲染-->
  7. <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
  8. <!--以最新内核进行渲染。-->
  9. <meta http-equiv="Cache-Control" content="no-siteapp"/>
  10. <!--百度禁止转码-->
  11. <title>moyu demo</title>
  12. <meta name="keywords" content="demo 测试 魔芋">
  13. <meta name="description" content="魔芋的测试示例">
  14. <meta name="author" content="魔芋,15000720652@163.com,http://www.cnblogs.com/moyuling/">
  15. <meta name="robots" content="index,follow">
  16. <!--定义网页搜索引擎索引方式-->
  17. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  18. <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
  19. <script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script>
  20. <style>
  21. </style>
  22. </head>
  23. <body>
  24. <h2>ValidationExample</h2>
  25. <form ng-app="myApp" ng-controller="validateCtrl" name="myForm" novalidate>
  26. <p>用户名:
  27. <br>
  28. <input type="text" name="user" ng-model="user" required>
  29. 用户名是必须的。
  30. </p>
  31. <p>邮箱:
  32. <br>
  33. <input type="email" name="email" ng-model="email" required>
  34. 邮箱是必须的。
  35. 非法的邮箱。
  36. </p>
  37. <p>
  38. <input type="submit" ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
  39. myForm.email.$dirty && myForm.email.$invalid">
  40. </p>
  41. </form>
  42. <script>
  43. var app = angular.module('myApp',[]);
  44. app.controller('validateCtrl',function($scope){
  45. $scope.user ='John Doe';
  46. $scope.email ='john.doe@gmail.com';
  47. });
  48. </script>
  49. </body>
  50. </html>

 

图片 1

 

  HTML 表单属性 novalidate 用于禁用浏览器默认的验证。

实例分析

AngularJS ng-model 指令用于绑定输入元素到范中。

 

型对象有个别个属性: user 和 email

咱应用了 ng-show令, color:red
在邮件是 $dirty 或 $invalid 才显示。

属性 描述
$dirty 表单有填写记录
$valid 字段内容合法的
$invalid 字段内容是非法的
$pristine 表单没有填写记录

=

 

=

相关文章