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 入门4-表单和验证