- <!DOCTYPE html>
- <html ng-app="app">
- <head>
- <title>表单的基本验证功能</title>
- <Meta charset="utf-8"/>
- <script src="../Script/angular.min.js" type="text/javascript"></script>
- <link rel="stylesheet" href="../bootstrap-3.0.0/css/bootstrap.css">
- <style type="text/css">
- body {
- font-size: 14px;
- }
- input{
- padding: 3px;
- }
- </style>
- </head>
- <body>
- <center>
- <form name="temp_form" ng-submit="save()" ng-controller="formsubmit">
- <div>
- <input type="text" name="t_name" ng-model="name" required />
- <span ng-show="temp_form.t_name.$error.required">
- 姓名不能为空!
- </span>
- </div>
- <div>
- <input type="email" name="t_email" ng-model="email" required />
- <span ng-show="temp_form.t_email.$error.required">
- 邮件不能为空!
- </span>
- <span ng-show="temp_form.t_email.$error.email">
- 邮件格式不对!
- </span>
- </div>
- <input type="submit" ng-disabled="temp_form.$invalid" value="提交">
- </form>
- </center>
- <script type="text/javascript">
- var app = angular.module('app',[]);
- app.controller('formsubmit',['$scope',function ($scope) {
- $scope.name = "海哥";
- $scope.email = "1150979148@qq.com";
- $scope.save = function () {
- console.log("提交成功!");
- }
- }]);
- </script>
- </body>
- </html>
截图: @H_403_0@
@H_403_0@
@H_403_0@