首页 > 代码库 > angularjs使用ngMessages的注册表单实例

angularjs使用ngMessages的注册表单实例

<!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="http://www.mamicode.com/angular-messages.js"></script>
3.依赖注入angular.module(‘myApp‘, [‘ngMessages‘]);

 

angularjs使用ngMessages的注册表单实例