AngularJS 表单基本的验证功能

  • 2022-07-15 23:05:52

 代码:

<!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 = "[email protected]";
            $scope.save = function () {
            	console.log("提交成功!");
            }
    	}]);
    </script>
</body>
</html>

截图:

AngularJS 表单基本的验证功能


AngularJS 表单基本的验证功能

猜你喜欢