<!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']);

angularjs使用ng-messages的注册表单实例的更多相关文章

  1. 第一百八十四节，jQuery-UI，验证注册表单

    jQuery-UI,验证注册表单 html <form id="reg" action="123.html" title="会员注册" ...

  2. 【js类库AngularJs】学习angularJs的指令（包括常见表单验证，隐藏等功能）

    [js类库AngularJs]学习angularJs的指令(包括常见表单验证,隐藏等功能) AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀 ...

  3. Html注册表单示例

    注册表单示例,出自<网页开发手记:Html,CSS,JavaScript实战详解>.   <html>   <head>   <title>注册表单&l ...

  4. 免费 PSD 下载： 20个精美的登录和注册表单

    注册表单有许多不同的形状和尺寸,有的只是单个的输入框,有的则需要多个步骤.登录表单的设计将定义网站的性质,因此它应进行针对性的设计.下面的列表提供了20个醒目的登录和注册表单设计为您提供灵感. 您可能 ...

  5. 如何利用WordPress创建自定义注册表单插件

    来源:http://www.ido321.com/1031.html 原文:Creating a Custom WordPress Registration Form Plugin 译文:创建一个定制 ...

  6. HTML6注册表单输入日志标题

    一.找到元素. var d = document.getElementById("") var d = document.getElementsByName("" ...

  7. form注册表单圆角 demo

    form注册表单圆角 <BODY> <div class="form"> <ul class="list"> <li& ...

  8. 模拟js中注册表单验证

    示例1 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...

  9. UX设计秘诀之注册表单设计，细节决定成败

    以下内容由摹客团队翻译整理,仅供学习交流,摹客iDoc是支持智能标注和切图的产品协作设计神器. 说实话,现实生活中,又有多少人会真正喜欢填写表格?显然,并不多.因为填写表单这样的网页或App服务,并非 ...

随机推荐

  1. 一个读取C#特性Description方法

    class Program { static void Main(string[] args) { string str= DB.write.ToDescription(); Console.Writ ...

  2. 成功启动了Apache却没有启动apache服务器

    原因没有用管理员身份运行...

  3. c++ 输出时间

    [root@GZMJ_Logic_2 ]# cat lys.cpp #include "stdio.h" #include <iostream> #include< ...

  4. Android开发者须知的几种APP加密方式--备

    作为一个Android开发者,不仅需要使自己的APP功能丰富,便于使用,同时也需要去完善APP的安全性,下面就介绍几种简单而又可靠的加密方法.1.Spongy Castle Spongy Castle ...

  5. 转：iOS 7人机界面准则

    原文来自于:http://www.infoq.com/cn/news/2014/02/ios-ui-design Apple官方推出的“iOS人机界面准则”一直被iOS开发者奉为绝对的设计参考宝典,特 ...

  6. CSS5.4 安装问题集

    由于手痒,将5.2 卸载了,装了5.4 出现如下错误:install failed to install com.ti.ccstudio.debugserver.win32 corrctly. ... ...

  7. .Net框架与框架类库-转

    http://blog.csdn.net/rrrfff/article/details/6686493 .NET Framework 具有两个主要组件:公共语言运行库和 .NET Framework类 ...

  8. BZOJ1119: [POI2009]SLO

    1119: [POI2009]SLO Time Limit: 30 Sec  Memory Limit: 162 MBSubmit: 379  Solved: 181[Submit][Status] ...

  9. POJ_3083——贴左右墙DFS,最短路径BFS

    Description The cornfield maze is a popular Halloween treat. Visitors are shown the entrance and mus ...

  10. hdu&&poj搜索题题号

    搜索 hdu1067 哈希 hdu1401 双向搜索 hdu1430 哈希 hdu1667 跌搜+启发式函数 hdu1685 启发式搜索 hdu1813 启发式搜索 hdu1885 状态压缩搜索 hd ...