<!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. js中运算符的优先级

    不确定下面表达式的运算顺序? a>b?c:d+e a&&b==c 看看下表就清楚了,下表按优先级从最高到最低的列出,具有相同优先级按从左至右的顺序求值. 运算符 描述 . [] ...

  2. python简介与基本操作

    一.python的历史 python的创始人Guido van Rossum,现就职于Dropbox公司. 1989年12月份诞生了python1.0 2000年10月16日发布了python2.0 ...

  3. 2017-1-9css

    2017-1-9css css border-image详解 http://www.360doc.com/content/14/1016/13/2792772_417403574.shtml 最简单的 ...

  4. 基于verilog的FPGA编程经验总结(XILINX ISE工具)

    1.用ISE仿真的时候.所用变量一定要初始化. ISE默认初始量为"XXXXX", 而Quarters是默认为"00000"的, 其实实际上, 下到FPGA里后 ...

  5. z-index的最大值、最小值

    浏览器 最大值 超过最大值后变成 最小值 小于最小值后变成 备注 IE6 2147483647 2147483647 -2147483648 -2147483648   IE7 2147483647 ...

  6. JSON stringify and parse

    来源 : http://javascript.ruanyifeng.com/stdlib/date.html //解析json也可以传入一个方法, 基本上和stringify差不多,不过是逆序的, 要 ...

  7. Javascript Promise 学习 (中)

    时隔多日,对promise有了多一点点的了解. 最近用angularjs 做开发,所以研究了一下它的 $q 功能不算很强大,算是简化版的 Q.js 参考了一下源码,不过我的等级还差很多... 作为学习 ...

  8. 欧拉计划之Largest palindrome product

    A palindromic number reads the same both ways. The largest palindrome made from the product of two 2 ...

  9. Java设计模式之简单工厂、工厂方法和抽象工厂

    在前面的学习中(参见前面的博客),我们学到了很多OO原则: 封装变化 多用组合,少用继承 针对接口/超类编程,不针对实现编程 松耦合 开闭原则 让我们从一个简单的类开始,看看如何将之改造成符合OO原则 ...

  10. http缓存策略

    http://foofish.net/blog/95/http-cache-policy