<!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. mysql 获取当前日期及格式化

    MYSQL 获取当前日期及日期格式获取系统日期: NOW()格式化日期: DATE_FORMAT(date, format)注: date:时间字段format:日期格式 返回系统日期,输出 2009 ...

  2. Pycharm在创建py文件时,如何自动添加文件头注释(类似于钩子特性)?

    在每次新建一个py文件的时候 1 如何自动添加/usr/bin/env python2 自动添加 coding=utf8 操作方法: File->settings->Editor-> ...

  3. 基于CAShapeLayer和贝塞尔曲线的圆形进度条动画

    通过CAShapeLayer和贝塞尔曲线搭配的方法,创建的简单的圆形进度条的教程先简单的介绍下CAShapeLayer1,CAShapeLayer继承自CALayer,可使用CALayer的所有属性2 ...

  4. 转：Yelp开发团队发布内部网站设计指南

    原文来自于:http://www.infoq.com/cn/news/2014/02/yelp-style-guide 近日,Yelp开发团队在博客发布消息:Yelp公开了内部网站设计指南.这份文档此 ...

  5. angularjs directive and component 指令与组件 ( 1.5.0 以后 )

    之前写过一篇了 http://www.cnblogs.com/keatkeat/p/3903673.html 但某些部分写的不太清楚,甚至有点错误,所以今天特地在这里再来谈谈. 这篇主要是说指令的隔离 ...

  6. 一道考验你设计能力的C++编程题

    http://www.cppblog.com/weiym/archive/2012/06/12/178472.html

  7. jquery easyui tree绑定静态数据的方法

    若是动态,返回的是json格式,这个比较常见,就不列举说明了,如果要绑定的数据为静态,很简单,只需将ajax的url改为data 如 //鼠标单击树事件 $("#tree").tr ...

  8. 如何在Excel中启用宏？

    OFFICE2003版本中启用宏的方法: 1.首先打开EXCEL应用程序. 2.点击上方的"工具"--"宏"--"安全性" 3.在" ...

  9. ortp使用详解2

    五:数据的接收和发送 1. 发送过程: 应用发送数据时调用接口 rtp_session_send_with_ts 完成.参数为会话句柄,数据缓冲区地址,数据长度以及应用当前的时间戳.在该接口中,会先调 ...

  10. crossdomain.xml跨越

    crossdomain.xml是adobe搞的,为了让flash跨域访问文件. 该配置文件放于服务器端的根目录下面.来设置让哪些域名下面的swf文件能够访问我服务器上的内容. 比如:我的服务器上有个图 ...