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

angularjs使用ng-messages的注册表单实例

2016-10-12 09:17 369 查看

<!DOCTYPE html>
<html lang="zh-CN" ng-app="app">
<head>
<meta charset="utf-8">
<title>注册</title>
<link rel="stylesheet" href="../bootstrap.min.css">
</head>
<body>
<form name="signup_form" novalidate ng-submit="signupForm()" ng-controller="signupController">
<fieldset>
<legend>Signup</legend>
<div class="row">
<div class="col-xs-12">
<label>Your name</label>
<input type="email"
placeholder="Name"
name="name"
ng-model="signup.name"
ng-minlength="3"
ng-maxlength="20"
required>
<div class="error" ng-messages="signup_form.name.$error" ng-messages-multiple><!--注意这里的 message‘s’ 和 message‘’ -->
<small ng-message="required">必填</small>
<small ng-message="email">邮箱不正确</small><!-- ng-messages-multiple 如果有多个规则同时不匹配 则同时出现多个错误提示 -->
<small ng-message="minlength">不能小于3位</small>
<small ng-message="maxlength">不能大于20位</small>
</div>
</div>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</fieldset>
</form>
<script src="../angular.min.js"></script>
<script src="angular-messages.min.js"></script>
<script>
angular.module('app', ['ngMessages'])
.controller('signupController', function($scope) {

})
</script>
</body>
</html>

ngMessages仅支持angularjs v1.3+

引用ngMessages的步骤说明：

1.下载ngMessages模块 npm install angular-messages
2.引入js<script src="angular-messages.js"></script>
3.依赖注入angular.module('myApp', ['ngMessages']);

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

标签：

相关文章推荐

新的分享

章节导航