您的位置：首页 > Web前端 > AngularJS

angularjs简单表单校验

2016-10-25 09:58 363 查看

<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8">
<title>EE</title>
<script type="text/javascript" src="angular.min.js"></script>
<style type="text/css">
body {
font-size: 12px;
}
input  {
padding: 3px;
}
</style>
</head>
<body>

<form name="temp_form"
ng-submit="save()"
ng-controller="c14">

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

<script type="text/javascript">
var app = angular.module("app", []);
app.controller("c14", ['$scope', function($scope) {
$scope.name = "raid";
$scope.email = "222222";
$scope.save = function() {
console.log("提交成功");
}
}])
</script>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript angularjs

相关文章推荐

新的分享

章节导航