AngularJs在单击提交后显示验证信息.
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="js/angular-1.2.16.js" ></script>
</head>
<body>
<form name="signup_form" novalidate ng-submit="signupForm()" ng-controller="signupController">
<p><input type="text" name="name" ng-model="signup.name" ng-minlength="3" ng-maxlength="20" required="required" /></p>
<div style="color: red;" ng-show="signup_form.name.$dirty&&signup_form.name.$invalid&&signup_form.submitted">
<small ng-show="signup_form.name.$error.required">姓名是必填项</small>
<small ng-show="signup_form.name.$error.minlength">姓名至少要3个字符</small>
<small ng-show="signup_form.name.$error.maxlength">姓名最多20个字符</small>
</div>
<input type="submit" value="提交" />
</form>
</body>
<script type="text/javascript">
var app=angular.module("app",[]);
app.controller('signupController',function($scope){
$scope.submitted=false;
$scope.signupForm=function(){
if($scope.signup_form.$valid){
alert("验证通过");
}else{
$scope.signup_form.submitted=true;
}
}
});
</script>
</html>
当点击提交呢按钮后就会出现提示信息.
运行结果:
AngularJs在单击提交后显示验证信息.的更多相关文章
- AngularJS 表单提交后显示验证信息与失焦后显示验证信息
虽然说AngularJS的实时表单验证非常有用,非常高效方便,但是当用户还没有完成输入时便弹出一个错误提示,这种体验是非常糟糕的. 正常的表单验证逻辑应该是在用户提交表单后或完成当前字段中的输入后,再 ...
- python作业设计：输入用户名密码，认证成功后显示欢迎信息，输错三次后锁定
作业需求: 1.输入用户名密码 2.认证成功后显示欢迎信息 3.输错三次后锁定实现思路: 1.判断用户是否在黑名单,如果在黑名单提示账号锁定. 2.判断用户是否存在,如果不存在提示账号不存在. 3.判 ...
- 如何使用AngularJS对表单提交内容进行验证
AngularJS是一款优秀的前端JS框架,已经被用于Google的多款产品当中.它有着诸多特性,最为核心的是:MVC.模块化.自动化双向数据绑定.语义化标签.依赖注入等……使用它可以大大减少书写代码 ...
- ztree实现根节点单击事件，显示节点信息
这段时间在维护公司的项目,去年做的项目里面有ztree树的例子,想起之前还没有开始写博客,一些知识点也无从找起,要新加一个右击节点事件,折腾了半天,其中也包含了一些知识点,稍稍做了一些demo. zT ...
- 轻松搭建CAS 5.x系列(9)-登录后显示通知信息
概述说明 用户在账号名密码认证通过后,CAS可以跳转到登陆完成页面前,显示相关的通知页面. 搭建步骤 `1. 首先,您需要有个CAS Server端 如果您没有,可以按照我之前写的文章<轻松搭建 ...
- 纯CSS图片缩放后显示详细信息
哎~!突然好久没更新博客了,最近总在下雨,晚上也经常没有时间来管理博客(目前在敲自己的一个平台,晢时还在写逻辑层的代码),好吧!废话不多说了,言归正传. 现在很多图片缩放的特效大多数都是用javasc ...
- AngularJS中使用的表单验证
Reference: http://www.tuicool.com/articles/2Qbiqi 客户端表单验证是AngularJS里面最酷的功能之一. AngularJS表单验证可以让你从一开始就 ...
- (译) 在AngularJS中使用的表单验证功能【转】
验证功能是AngularJS里面最酷炫的功能之一,它可以让你写出一个具有良好用户体验的Web应用. 在AngularJS中,有许多用于验证的指令.我们将先学习几个最流行的内置指令,然后再创建一个自定义 ...
- (译) 在AngularJS中使用的表单验证功能
验证功能是AngularJS里面最酷炫的功能之一,它可以让你写出一个具有良好用户体验的Web应用. 在AngularJS中,有许多用于验证的指令.我们将先学习几个最流行的内置指令,然后再创建一个自定义 ...
随机推荐
- Undefined symbols for architecture i386: "MyGetOpenALAudioData(__CFURL const*, int*, int*, int*)"
今天把apple developer上的例子程序oalTouch中的MyOpenALSupport.h和MyOpenALSupport.c添加到自己的工程中,并在另一个文件xxx.cpp里调用,结果出 ...
- Swagger-UI 基于REST的API测试/文档类插件
现在多数的项目开发中,网站和移动端都需要进行数据交互和对接,这少不了使用REST编写API接口这种场景.例如我目前的工作,移动端交由了另一团队开发,不同开发小组之间就需要以规范和文档作为标准和协作基础 ...
- 【转】C#程序打包安装部署之添加注册表项
今天为大家整理了一些怎样去做程序安装包的具体文档,这些文档并不能确保每个人在做安装包的时候都能正确去生成和运行,但是这些文档的指导作用对于需要的朋友来说还是很有必要的,在实际产品的安装部署过程中可能有 ...
- 转：Scrapy安装、爬虫入门教程、爬虫实例（豆瓣电影爬虫）
Scrapy在window上的安装教程见下面的链接:Scrapy安装教程 上述安装教程已实践,可行.(本来打算在ubuntu上安装Scrapy的,但是Ubuntu 磁盘空间太少了,还没扩展磁盘空间,所 ...
- ORALCE 游标简单的实例
--取简单的游标 declare cursor sp is select * from user_tables; myrecord user_tables%ROWTYPE; begin open sp ...
- DW(四):Azure域控服务器配置
polybase集群要求使用相同的域账号,本节介绍选择用Azure虚拟机搭建自己的内网DNS服务器和域控 创建虚拟网络polybase,创建名为DNS的子网,如下图: 创建虚拟机,选择polybase ...
- Hive(六):HQL DDL
HQL语法基于 SqlLine(http://sqlline.sourceforge.net/),DDL主要包含数据库.函数.视图的创建.修改.删除,参考资料:(https://cwiki.apach ...
- 使用匿名委托，Lambda简化多线程代码
使用匿名委托,Lambda简化多线程代码 .net中的线程也接触不少了.在多线程中最常见的应用莫过于有一个耗时的操作需要放到线程中去操作,而在这个线程中我们需要更新UI,这个时候就要创建一个委托了 ...
- JQuery移除事件
移除事件 unbind(type [,data]) //data是要移除的函数 $('#btn').unbind("click"); //移除click $('#btn') ...
- 【java基础学习-2--】关于Hashcode()的使用
摘要 Java中equals()和hashCode()有一个契约: 如果两个对象相等的话,它们的hash code必须相等: 但如果两个对象的hash code相等的话,这两个对象不一定相等; 这个约 ...