angularjs使用ng-messages的注册表单实例
<!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的注册表单实例的更多相关文章
- 第一百八十四节，jQuery-UI，验证注册表单
jQuery-UI,验证注册表单 html <form id="reg" action="123.html" title="会员注册" ...
- 【js类库AngularJs】学习angularJs的指令（包括常见表单验证，隐藏等功能）
[js类库AngularJs]学习angularJs的指令(包括常见表单验证,隐藏等功能) AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀 ...
- Html注册表单示例
注册表单示例,出自<网页开发手记:Html,CSS,JavaScript实战详解>. <html> <head> <title>注册表单&l ...
- 免费 PSD 下载： 20个精美的登录和注册表单
注册表单有许多不同的形状和尺寸,有的只是单个的输入框,有的则需要多个步骤.登录表单的设计将定义网站的性质,因此它应进行针对性的设计.下面的列表提供了20个醒目的登录和注册表单设计为您提供灵感. 您可能 ...
- 如何利用WordPress创建自定义注册表单插件
来源:http://www.ido321.com/1031.html 原文:Creating a Custom WordPress Registration Form Plugin 译文:创建一个定制 ...
- HTML6注册表单输入日志标题
一.找到元素. var d = document.getElementById("") var d = document.getElementsByName("" ...
- form注册表单圆角 demo
form注册表单圆角 <BODY> <div class="form"> <ul class="list"> <li& ...
- 模拟js中注册表单验证
示例1 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...
- UX设计秘诀之注册表单设计，细节决定成败
以下内容由摹客团队翻译整理,仅供学习交流,摹客iDoc是支持智能标注和切图的产品协作设计神器. 说实话,现实生活中,又有多少人会真正喜欢填写表格?显然,并不多.因为填写表单这样的网页或App服务,并非 ...
随机推荐
- How To Learn English Very Fast
How do you learn English very fast? Every week, I get emails about this topic. Typically, someone ...
- Nginx源码研究一：NGINX模块启动
Nginx 是一个轻量级,但是高性能的 HTTP 和 代理 服务器,也是一个 IMAP/POP3/SMTP代理服务器. 它的第一个版本0.1.0是由俄罗斯的工程师Igor Sysoev与2004年10 ...
- The last packet sent successfully to the server was 0 milliseconds ago. The driver has not received any packets from the server. （关于jdbc）
The last packet sent successfully to the server was milliseconds ago. The driver has not received an ...
- 利用shell脚本函数实现网络连通性的检测
通常情况下,linux系统网络连通性的检测有两种方法: 1.通过“ping指令 + 目标IP” 或者 “ping指令 + 目标IP域名” 注意针对IPv6地址的IP网络检测需要试用ping6,同时pi ...
- java注解实例-反射生成sql
定义描述用户表的注解: package dao; import java.lang.annotation.ElementType; import java.lang.annotation.Retent ...
- -fembed-bitcode is not supported on versions of iOS prior to 6.0
-fembed-bitcode is not supported on versions of iOS prior to 6.0 说法二 错误提示 -fembed-bitcode is not s ...
- Sicily 1133. SPAM
题目地址:1133. SPAM 思路: 题目意思是说在‘@’的前后出现题目给定的合法字符或者不连续出现‘.’字符的话,这个就是合理的输出. 那么以@为中心,向前,向后扫描,当扫描到不符合字符时,记录此 ...
- USB的逻辑值和用途值有什么区别?
用途最小值,用途最大值.逻辑最小值,逻辑最大值分别是什么意思?如题: code uint8 ReportDescriptor[]= { //每行开始的第一字节为该条目的前缀,前缀的格式为: //D7~ ...
- MCS-51单片机内部结构
8051是MCS-51系列单片机的典型产品,我们以这一代表性的机型进行系统的讲解. 8051单片机包含中央处理器.程序存储器(ROM).数据存储器(RAM).定时/计数器.并行接口.串行接口和中断系统 ...
- MFC动态创建按钮，并在按钮上实现位图的切换显示
动态创建按钮,并在按钮中添加位图,通过单击按钮显示不同的位图,可设置为显示按钮按下和弹起两种状态.只要判断a值从而输入不同的响应代码. 1.在头文件中添加: CButton *pBtn; 2.在初始化 ...