搜索文档
首页
HTML/CSS
JavaScript
服务端开发
Java教程
移动端
数据库
当前位置:
首页
JavaScript
AngularJS 教程
AngularJS 基础教程
源代码
清空
点击运行
<html> <head> <title>Angular JS Forms</title> <script src = "https://cdn.staticfile.org/angular.js/1.3.14/angular.min.js"></script> <style> table, th , td { border: 1px solid grey; border-collapse: collapse; padding: 5px; } table tr:nth-child(odd) { background-color: #f2f2f2; } table tr:nth-child(even) { background-color: #ffffff; } </style> </head> <body> <h2>AngularJS-表单示例</h2> <div ng-app = "mainApp" ng-controller = "studentController"> <form name = "studentForm" novalidate> <table border = "0"> <tr> <td>输入名字:</td> <td><input name = "firstname" type = "text" ng-model = "firstName" required> <span style = "color:red" ng-show = "studentForm.firstname.$dirty && studentForm.firstname.$invalid"> <span ng-show = "studentForm.firstname.$error.required">必须填写名字.</span> </span> </td> </tr> <tr> <td>输入姓氏: </td> <td><input name = "lastname" type = "text" ng-model = "lastName" required> <span style = "color:red" ng-show = "studentForm.lastname.$dirty && studentForm.lastname.$invalid"> <span ng-show = "studentForm.lastname.$error.required">必须填写姓氏.</span> </span> </td> </tr> <tr> <td>Email: </td><td><input name = "email" type = "email" ng-model = "email" length = "100" required> <span style = "color:red" ng-show = "studentForm.email.$dirty && studentForm.email.$invalid"> <span ng-show = "studentForm.email.$error.required">电子邮件为必填项.</span> <span ng-show = "studentForm.email.$error.email">无效的邮件地址.</span> </span> </td> </tr> <tr> <td> <button ng-click = "reset()">Reset</button> </td> <td> <button ng-disabled = "studentForm.firstname.$dirty && studentForm.firstname.$invalid || studentForm.lastname.$dirty && studentForm.lastname.$invalid || studentForm.email.$dirty && studentForm.email.$invalid" ng-click="submit()">Submit</button> </td> </tr> </table> </form> </div> <script> var mainApp = angular.module("mainApp", []); mainApp.controller('studentController', function($scope) { $scope.reset = function() { $scope.firstName = "Sea"; $scope.lastName = "Gull"; $scope.email = "Seagull@div.cn"; } $scope.reset(); }); </script> </body> </html>
运行结果