1.  <!DOCTYPE html>
  2.  <html ng-app="app">
  3.      <head>
  4.          <meta charset="utf-8">
  5.          <title></title>
  6.          <script type="text/javascript" src="js/angular-1.2.16.js" ></script>
  7.      </head>
  8.      <body>
  9.          <form name="signup_form" novalidate ng-submit="signupForm()" ng-controller="signupController">
  10.              <p><input type="text" name="name" ng-model="signup.name" ng-minlength="3" ng-maxlength="20" required="required" /></p>
  11.              <div style="color: red;" ng-show="signup_form.name.$dirty&&signup_form.name.$invalid&&signup_form.submitted">
  12.                  <small ng-show="signup_form.name.$error.required">姓名是必填项</small>
  13.                  <small ng-show="signup_form.name.$error.minlength">姓名至少要3个字符</small>
  14.                  <small ng-show="signup_form.name.$error.maxlength">姓名最多20个字符</small>
  15.              </div>
  16.              <input type="submit" value="提交" />
  17.          </form>
  18.      </body>
  19.      <script type="text/javascript">
  20.      var app=angular.module("app",[]);
  21.          app.controller('signupController',function($scope){
  22.              $scope.submitted=false;
  23.              $scope.signupForm=function(){
  24.                  if($scope.signup_form.$valid){
  25.                      alert("验证通过");
  26.                  }else{
  27.                      $scope.signup_form.submitted=true;
  28.                  }
  29.              }
  30.          });
  31.      </script>
  32.  </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. linux 下查看机器是cpu是几核的

    几个cpu more /proc/cpuinfo |grep "physical id"|uniq|wc -l 每个cpu是几核(假设cpu配置相同) more /proc/cpu ...

  2. html之p标签

    p标签定义段落 p元素会自动在其前后创建一些空白,浏览器会自动添加这些空间. 效果图:

  3. 类型参数约束 : Controller where T : class,new()

    这是类型参数约束,.NET支持的类型参数约束有以下五种: where T : struct | T必须是一个结构类型 where T : class | T必须是一个类(class)类型,不能是结构( ...

  4. DBA常用SQL之会话与等待事件

    SELECT * FROM V$SESSION WHERE USERNAME IS NOT NULL AND STATUS = 'ACTIVE' ORDER BY LOGON_TIME, SID; 1 ...

  5. PHPCMS-首页的二级导航、轮播效果

    导航栏:(header.html) <div id="menu"> <a href="{siteurl($siteid)}"><d ...

  6. Markdown Example

    An h1 header Paragraphs are separated by a blank line. 2nd paragraph. Italic, bold, and monospace. I ...

  7. LintCode "Swap Two Nodes in Linked List"

    Nothing special. Just take care of corner cases. class Solution { public: /** * @param head a ListNo ...

  8. LintCode "Backpack"

    A simple variation to 0-1 Knapsack. class Solution { public: /** * @param m: An integer m denotes th ...

  9. 如何设置DNS的SPF记录

    如何设置DNS的SPF记录 Introduction SPF的完整意思为 "Sender Policy Framework".翻译过来就是发送方策略框架,是一项跟 DNS 相关的技 ...

  10. 迁移学习（Transfer Learning）（转载）

    原文地址:http://blog.csdn.net/miscclp/article/details/6339456 在传统的机器学习的框架下,学习的任务就是在给定充分训练数据的基础上来学习一个分类模型 ...