AngularJS 表单基本的验证功能

前端之家收集整理的这篇文章主要介绍了AngularJS 表单基本的验证功能前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
@H_403_0@代码

@H_403_0@

  1. <!DOCTYPE html>
  2. <html ng-app="app">
  3. <head>
  4. <title>表单的基本验证功能</title>
  5. <Meta charset="utf-8"/>
  6. <script src="../Script/angular.min.js" type="text/javascript"></script>
  7. <link rel="stylesheet" href="../bootstrap-3.0.0/css/bootstrap.css">
  8. <style type="text/css">
  9. body {
  10. font-size: 14px;
  11. }
  12.  
  13. input{
  14. padding: 3px;
  15. }
  16. </style>
  17. </head>
  18. <body>
  19. <center>
  20. <form name="temp_form" ng-submit="save()" ng-controller="formsubmit">
  21. <div>
  22. <input type="text" name="t_name" ng-model="name" required />
  23. <span ng-show="temp_form.t_name.$error.required">
  24. 姓名不能为空!
  25. </span>
  26. </div>
  27. <div>
  28. <input type="email" name="t_email" ng-model="email" required />
  29. <span ng-show="temp_form.t_email.$error.required">
  30. 邮件不能为空!
  31. </span>
  32. <span ng-show="temp_form.t_email.$error.email">
  33. 邮件格式不对!
  34. </span>
  35. </div>
  36. <input type="submit" ng-disabled="temp_form.$invalid" value="提交">
  37. </form>
  38. </center>
  39. <script type="text/javascript">
  40. var app = angular.module('app',[]);
  41. app.controller('formsubmit',['$scope',function ($scope) {
  42. $scope.name = "海哥";
  43. $scope.email = "1150979148@qq.com";
  44. $scope.save = function () {
  45. console.log("提交成功!");
  46. }
  47. }]);
  48. </script>
  49. </body>
  50. </html>

截图: @H_403_0@

@H_403_0@

@H_403_0@

猜你在找的Angularjs相关文章