Angular.js学习之二表单应用实例

前端之家收集整理的这篇文章主要介绍了Angular.js学习之二表单应用实例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

开始实例之前要先了解angular提供了哪些常用的表单验证命令:

1. required指令: 相当于Html5的required属性,验证不能为空

<input type="text" required />


2. ng-maxlength属性: 验证文本框内容的长度最大值

<input type="text" ng-maxlength="10" />


3. ng-minlength属性: 验证文本框内容的长度最小值

<input type="text" ng-minlength="3" />


4.ng-pattern属性: 验证文本框内容是否匹配正则表达式

<input type="text" ng-pattern="/[0-9|a-zA-Z]/" />


5. 表单名.$valid : 这个属性用来获取通过验证的表单的状态,如果所有的验证都通过了,它就是true,否则只要有一项不通过,它就是false

6.表单名.$invalid: 这个属性用来获取未通过验证的表单的状态,只要有一项未通过验证,它就是true,否则,全部通过验证了,它就是false,,刚好和上面5.提到的“表单名.$valid”用法相反

7. ng-disabled属性: 判断按钮是否禁用. 值为true时,禁用该按钮,可以结合“表单名.$valid”或者“表单名.$invalid”使用

8.$error- 指出确切的错误,我们根据验证的类型是required 或者是email或者是url来反馈确切的错误信息给用户

9.novolidate 屏蔽浏览器对表单的默认验证行为,它包含当前表单的所有验证内容,以及它们是否合法的信息

10.其他的可结合Html5新增的input类型:email number url等验证用户输入内容的合法性。


接下来是进行表单验证实例:

  1. <!DOCTYPE html>
  2. <html ng-app="myApp" ng-controller="myCtrl">
  3. <head>
  4. <Meta charset="UTF-8">
  5. <Meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  6. <Meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
  7. <Meta name="format-detection" content="email=no"/>
  8. <Meta name="format-detection" content="telephone=no"/>
  9. <title>Test Form Validate</title>
  10. <link rel="stylesheet" type="text/css" href="style/bootstrap.min.css"/>
  11. <style>
  12. label{ font-weight: 100;}
  13. .formDiv h2{ text-align: center; font-size: .32rem}
  14. .groupDiv{ margin: 10px 0; font-size: .18rem;}
  15. .groupDiv input{ width: 85%;}
  16. .error{ color: red; text-indent: 2em;}
  17.  
  18. @media screen and (max-width: 640px){
  19. .groupDiv input{ width: 100%;}
  20. }
  21. </style>
  22. </head>
  23. <body>
  24.  
  25. <div class="container formDiv">
  26. <h2>AngularJS 表单验证应用实例</h2>
  27. <div class="col-md-6 col-md-offset-3">
  28. <form name="userForm" novalidate>
  29. <div class="groupDiv clearfix">
  30. <div class="col-xs-4 col-sm-4 col-md-2">
  31. <label for="name">用户名</label>
  32. </div>
  33. <div class="col-xs-8 col-sm-8 col-md-10">
  34. <input type="text" name="name" id="name" ng-model="user.name" required />
  35. </div>
  36. <div class="col-md-10 error">
  37. <span ng-show="userForm.name.$error.required">用户名必填!</span>
  38. </div>
  39. </div>
  40. <div class="groupDiv clearfix">
  41. <div class="col-xs-4 col-sm-4 col-md-2">
  42. <label for="pwd">密码:</label>
  43. </div>
  44. <div class="col-xs-8 col-sm-8 col-md-10">
  45. <input type="password" name="pwd" id="pwd" ng-model="user.pwd" ng-minlength="4" ng-maxlength="16" required />
  46. </div>
  47. <div class="col-md-10 error">
  48. <span ng-show="userForm.pwd.$error.required">密码必填!</span>
  49. <span ng-show="userForm.pwd.$error.minlength">最小长度为4</span>
  50. <span ng-show="userForm.pwd.$error.maxlength">最大长度为16</span>
  51. </div>
  52. </div>
  53. <div class="groupDiv clearfix">
  54. <div class="col-xs-4 col-sm-4 col-md-2">
  55. <label for="email">邮箱:</label>
  56. </div>
  57. <div class="col-xs-8 col-sm-8 col-md-10">
  58. <input type="email" name="email" id="email" ng-model="user.email" required />
  59. </div>
  60. <div class="col-md-10 error">
  61. <span ng-show="userForm.email.$error.required">email必填!</span>
  62. <span ng-show="userForm.email.$error.email">email格式错误</span>
  63. </div>
  64. </div>
  65. <div class="groupDiv clearfix">
  66. <div class="col-xs-4 col-sm-4 col-md-2">
  67. <label for="url">主页:</label>
  68. </div>
  69. <div class="col-xs-8 col-sm-8 col-md-10">
  70. <input type="url" name="homepage" id="homepage" ng-model="user.homepage" />
  71. </div>
  72. <div class="col-md-10 error">
  73. <span ng-show="userForm.homepage.$error.url">主页格式错误!必须包含http://</span>
  74. </div>
  75. </div>
  76. <div class="groupDiv">
  77. <input type="button" name="submit" id="submit" ng-disabled="userForm.$invalid" ng-click="regist()" value="submit" />
  78. </div>
  79.  
  80. </form>
  81. </div>
  82. </div>
  83.  
  84.  
  85.  
  86. <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
  87. <script src="js/app-font.js" type="text/javascript" charset="utf-8"></script>
  88. <script type="text/javascript">
  89. var myApp = angular.module("myApp",[]);
  90.  
  91. myApp.controller('myCtrl',function($scope) {
  92. $scope.user={
  93. name:"willim",pwd:"123456",email: "qq123@qq.com",homepage: "http://blog.csdn.net/eadio"
  94. };
  95. $scope.msg="";
  96. $scope.regist=function(){
  97. //提交资料保存入库
  98. //alert($scope.user.name);
  99. $scope.msg="保存成功";
  100. }
  101. });
  102. </script>
  103. </body>
  104. </html>

演示效果

如果邮件和url的格式一出错,浏览器就会自动抛出错误提示

然后,我们在提交按钮绑定了ng-disabled属性,通过userForm.$invalid检测到表单一旦有验证不通过,提交按钮就会被禁用掉。否则,一旦通过检测,绑定了ng-click属性,点击就会立即执行regist函数获取表单信息,保存资料入库,返回正确入库消息。

如下演示效果


ps:以上是学习angular表单验证实例操作的一些心得,有误解情况,欢迎指正~

猜你在找的Angularjs相关文章