15AngularJS 输入验证

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了15AngularJS 输入验证相关的知识，希望对你有一定的参考价值。

AngularJS 输入验证

AngularJS 表单和控件可以验证输入的数据。

输入验证

AngularJS 表单和控件可以提供验证功能，并对用户输入的非法数据进行警告。

 

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

应用代码

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

 

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

实例解析

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

 

模型对象有两个属性： user 和 email。

我们使用了 ng-show指令， color:red 在邮件是 $dirty 或 $invalid 才显示。

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





以上是关于15AngularJS 输入验证的主要内容，如果未能解决你的问题，请参考以下文章

AngularJS 不会验证 ng-show 隐藏的表单元素上的输入

当输入验证失败时，Angularjs会阻止表单提交

使用 AngularJS 比较表单验证中的两个输入值

AngularJS

模态弹出验证AngularJS

AngularJS入门学习笔记一