AngularJS 表单基本的验证功能

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

代码

<!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>

截图:



原文链接:https://www.f2er.com/angularjs/146617.html

猜你在找的Angularjs相关文章