<!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. javascript中的事件问题

    事件的类型: (1)鼠标事件:   click用户点击鼠标时发生,当用户的焦点在按钮上,并按了回车键,同样会触发这个事件 dbclick 用户双击鼠标左键时发生    mouseover 鼠标移出某个 ...

  2. validate插件深入篇

    1.使用valid()来验证表单是否填写正确: <form id="mainform"> <button id="check">< ...

  3. redis配置文件redis.conf详细说明

    # By default Redis does not run as a daemon. Use 'yes' if you need it.# Note that Redis will write a ...

  4. 文成小盆友python-num13 整个堡垒机

    本节主要内容: 1.pymsql的使用 2.SQLAchemy使用 3.Paramiko 4.通过ORM功能使用和Paramiko的使用实现一个简单的堡垒机模型. 一.pymsql的使用 pymsql ...

  5. 【学习笔记】【oc】类和对象及类的三大基本特征

    1.类和对象 类是抽象化,对象是具体化. (1)定义类: 分为两个步骤,类的声明:定义类的成员变量和方法:@interface 用于声明定义类的接口部分,@end表面定义结束:. 成员变量的定义:{} ...

  6. iOS开发——C篇&文件操作

    今天开始C语言中的重点难点就基本上技术忘了,但是还有最后一个知识点不得不提,那就是文件操作. 我们都知道,我们每天都在使用电脑,手机,或者其他电子或者移动设备,其实我们在使用的时候每时每刻都在执行文件 ...

  7. 无效的过程调用或参数: 'Instr'解决方法

    以前我一直使用ASP无组件上传类来上传文件.但是今天又个客户反映说.不能上传.出现错误.,但在我电脑上测试没问题.后来发现客户用的是IE8 于是开始找解决方法 错误如下:Microsoft VBScr ...

  8. Swift—重写-备

    ========================= 重写实例属性 我们可以在子类中重写从父类继承来的属性,属性有实例属性和静态属性之分,他们在具体实现也是不同的. 实例属性的重写一方面可以重写gett ...

  9. java.io.FileNotFoundException: /exapp/hadoop/name/current/VERSION (Permission denied)

    http://blog.csdn.net/blackiez/article/details/8570395

  10. uva 10034 Problem A: Freckles

    http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem&p ...