<!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在单击提交后显示验证信息.的更多相关文章

  1. AngularJS 表单提交后显示验证信息与失焦后显示验证信息

    虽然说AngularJS的实时表单验证非常有用,非常高效方便,但是当用户还没有完成输入时便弹出一个错误提示,这种体验是非常糟糕的. 正常的表单验证逻辑应该是在用户提交表单后或完成当前字段中的输入后,再 ...

  2. python作业设计：输入用户名密码，认证成功后显示欢迎信息，输错三次后锁定

    作业需求: 1.输入用户名密码 2.认证成功后显示欢迎信息 3.输错三次后锁定实现思路: 1.判断用户是否在黑名单,如果在黑名单提示账号锁定. 2.判断用户是否存在,如果不存在提示账号不存在. 3.判 ...

  3. 如何使用AngularJS对表单提交内容进行验证

    AngularJS是一款优秀的前端JS框架,已经被用于Google的多款产品当中.它有着诸多特性,最为核心的是:MVC.模块化.自动化双向数据绑定.语义化标签.依赖注入等……使用它可以大大减少书写代码 ...

  4. ztree实现根节点单击事件，显示节点信息

    这段时间在维护公司的项目,去年做的项目里面有ztree树的例子,想起之前还没有开始写博客,一些知识点也无从找起,要新加一个右击节点事件,折腾了半天,其中也包含了一些知识点,稍稍做了一些demo. zT ...

  5. 轻松搭建CAS 5.x系列(9)-登录后显示通知信息

    概述说明 用户在账号名密码认证通过后,CAS可以跳转到登陆完成页面前,显示相关的通知页面. 搭建步骤 `1. 首先,您需要有个CAS Server端 如果您没有,可以按照我之前写的文章<轻松搭建 ...

  6. 纯CSS图片缩放后显示详细信息

    哎~!突然好久没更新博客了,最近总在下雨,晚上也经常没有时间来管理博客(目前在敲自己的一个平台,晢时还在写逻辑层的代码),好吧!废话不多说了,言归正传. 现在很多图片缩放的特效大多数都是用javasc ...

  7. AngularJS中使用的表单验证

    Reference: http://www.tuicool.com/articles/2Qbiqi 客户端表单验证是AngularJS里面最酷的功能之一. AngularJS表单验证可以让你从一开始就 ...

  8. (译) 在AngularJS中使用的表单验证功能【转】

    验证功能是AngularJS里面最酷炫的功能之一,它可以让你写出一个具有良好用户体验的Web应用. 在AngularJS中,有许多用于验证的指令.我们将先学习几个最流行的内置指令,然后再创建一个自定义 ...

  9. (译) 在AngularJS中使用的表单验证功能

    验证功能是AngularJS里面最酷炫的功能之一,它可以让你写出一个具有良好用户体验的Web应用. 在AngularJS中,有许多用于验证的指令.我们将先学习几个最流行的内置指令,然后再创建一个自定义 ...

随机推荐

  1. Void 0

    void anything 都返回 undefined , 使用Void 0 ,仅仅是因为习惯而已,所以不必介怀. 比较好的写法应该是 void(0)

  2. wikioi 1475 m进制转十进制

    /*===================================== 1475 m进制转十进制 题目描述 Description 将m进制数n转化成一个十进制数 m<=16 题目保证转 ...

  3. php面向对象中的魔术方法中文说明

    1.__construct() 实例化对象是被自动调用.当__construct和以类名为函数名的函数 同时存在时调用__construct,另一个不背调用. 类名为函数名的函数为老版的构造函数. 2 ...

  4. Android之Handler用法总结

    方法一:(java习惯,在android平台开发时这样是不行的,因为它违背了单线程模型) 刚刚开始接触android线程编程的时候,习惯好像java一样,试图用下面的代码解决问题 new Thread ...

  5. 结合MongoDB开发LBS应用

    然后列举一下需求:1.实时性要高,有频繁的更新和读取2.可按距离排序支持分页3.支持多条件筛选(一个经纬度数据还包含其他属性,比如社交系统的性别.年龄) 方案简单介绍:1.sphinx geo索引支持 ...

  6. Android SDK Manager 更新失败的解决方法

    Android SDK Manager 更新失败的解决方法 原文地址 最近使用Android SDK Manager 更新Android SDK tools 发现经常更新失败,获取不到更新信息: Fe ...

  7. 正在调用的 ServicedComponent 配置不正确(请使用 regsvcs 重新注册)

    问题: 正在调用的 ServicedComponent 配置不正确(请使用 regsvcs 重新注册)   方法1: 我用的是64位操作系统.IIS中,启用32位应用程序设置为false.这样就可以了 ...

  8. C\C++拾遗------C#程序员重温C\C++之要点

    1.开发工具:建议采用VS2012及2013 1).因为VS2012对C++编码实现了自动编排格式(Ctrl E D) 2).提供智能感知(联想输入)功能 相比VS2010及以前版本对于习惯了智能感知 ...

  9. 【linux】如何查看和解压缩rpm文件内容

    查看rpm文件中的内容 http://www.cyberciti.biz/faq/howto-list-find-files-in-rpm-package/  Use following syntax ...

  10. android学习笔记38——样式和主题

    Style.Theme 样式和主题资源都是用于android应用的美化操作. 样式:一组格式的集合,可重复使用. android的样式资源存放与res/values文件夹下,其根元素为<reso ...