<div class="nav">
  <h4>表单验证</h4>
  <form ng-app="myApp" name="myForm" novalidate>
    <p>用户名:<br>
      <input type="text" name="user" ng-model="user" ng-minlength="6"
      ng-maxlength="16" ng-pattern="/^[a-zA-Z]{1}([a-zA-Z0-9]|[._]){5,11}$/" required>
      <span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
        <span ng-show="myForm.user.$error.required">请填写用户名</span>
        <span ng-show="myForm.user.$error.pattern ||
        myForm.user.$error.minlength">用户名以字母开头最小长度6 </span>
      </span>
    </p>
    <p>邮箱:<br>
      <input type="email" name="email" ng-model="email" required>
      <span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
        <span ng-show="myForm.email.$error.required">请填写邮箱</span>
        <span ng-show="myForm.email.$error.email">请填写正确邮箱地址</span>
      </span>
    </p>
    <p>手机号码:<br>
      <input type="number" name="number" ng-model="number"
      ng-minlength="11" maxlength="11" required>
      <span style="color:red" ng-show="myForm.number.$dirty && myForm.number.$invalid">
        <span ng-show="myForm.number.$error.number">请输入正确手机号码</span>
        <span ng-show="myForm.number.$error.minlength ||
        myForm.number.$error.maxlength">请输入11位手机号码</span>
      </span>
    </p>
    <p>
      <input type="submit"ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
      myForm.email.$dirty && myForm.email.$invalid ||
      myForm.number.$dirty && myForm.number.$invalid">
    </p>
  </form>
</div>

//js引入

<script type="text/javascript" src="js/angular.min.js" ></script>

Angular 表单验证 基础篇的更多相关文章

  1. Angular 表单验证类库 ngx-validator 1.0 正式发布

    背景介绍 之前写了一篇 <如何优雅的使用 Angular 表单验证>,结尾处介绍了统一验证反馈的类库  ngx-validator  ,由于这段时间一直在新模块做微前端以及相关业务组件库, ...

  2. 如何优雅的使用 Angular 表单验证

    随便说说,这一节可以跳过 去年参加 ngChine 2018 杭州开发者大会的时候记得有人问我: Worktile 是什么时候开始使用 Angular 的,我说是今年(2018年) 3 月份开始在新模 ...

  3. angularjs学习第五天笔记(第二篇:表单验证升级篇)

    您好,我是一名后端开发工程师,由于工作需要,现在系统的从0开始学习前端js框架之angular,每天把学习的一些心得分享出来,如果有什么说的不对的地方,请多多指正,多多包涵我这个前端菜鸟,欢迎大家的点 ...

  4. Angular表单验证

    novalidate   去掉html5自带的验证 ng-minlength    规定输入文本的最小长度 ng-maxlength    规定输入文本的最大长度 ng-submit  接收一个方法名 ...

  5. 简单的angular表单验证指令

    <html ng-app="myApp"> <head> <meta charset="UTF-8"> <title& ...

  6. angular表单验证实例----可用的代码

    前段时间,公司做一个单页面,就是一个表单验证,早开始在菜鸟教程上关注了angular,所以下派上用场了 angular里面对于表单验证,设置了很多指令. 也就是说不用自己写一些逻辑,直接绑定指令就行. ...

  7. 从浅入深剖析angular表单验证

    最近手上维护的组件剩下的BUG都是表单验证,而且公司的表单验证那块代码经历的几代人,里面的逻辑开始变得不清晰,而且代码结构不是很angular. 是很有必要深入了解表单验证. 入门之前,我觉得应该先了 ...

  8. angular 表单验证

    最近在用angular写表单验证时 , 不小心把ng-model全替换删掉了, 然后发现之前写的验证都失效, 在查阅资料和反复修改摸索后, 发现angular中的表单验证, 都是基于ng-model的 ...

  9. 简话Angular 05 Angular表单验证

    一句话: 可以使用所有html5表单验证功能,同时Angular还增强了部分验证,支持动态验证 1. 上源码 <div ng-controller="ExampleController ...

随机推荐

  1. ko绑定----记录

    1.绑定变量 globalData = ko.observable({item:{}}); 2.绑定html ko.applyBindings(globalData, document.getElem ...

  2. C语言实例解析精粹学习笔记——32

    实例32: 编制一个包含姓名.地址.邮编和电话的通讯录输入和输出函数. 思路解析: 1.用结构体来完成姓名.地址.邮编和电话的组合. 2.结构体指针的使用. 3.malloc的使用 4.scanf函数 ...

  3. spring配置jackson不返回null值

    #json不返回null spring.jackson.default-property-inclusion=non_null

  4. 关于springboot 连接mysql 数据库报错问题

    springboot连接MySQL运行报错: The server time zone value 'Öйú±ê׼ʱ¼ä' is unrecognized or represents more ...

  5. python操作nosql数据库之memcache

    一.memcache的安装 1.memcache简介 Memcached是一个高性能的分布式内存对象缓存系统,用于动态Web应用以减轻数据库负载.它通过在内存中缓存数据和对象减少读取数据库的次数,从而 ...

  6. tensorflow nmt基本配置(tf-1.4)

    随着tensorflow的不断更新,直接按照nmt的教程搭建nmt环境会报错的...因此,需要一些不太好的办法来避免更多的问题出现.tensorflow看来在ubuntu和debian中运行是没有问题 ...

  7. Docker 安装Neo4j

    拉取最新的neo4j镜像 docker pull neo4j 运行Neo4j 容器 docker run -it -d -p 7474:7474 -p 7687:7687 neo4j:latest 打 ...

  8. 总结java操作MySQL 即JDBC的使用

    java.sql包中存在DriverManager类,Connection接口,Statement接口和ResultSet接口.类和接口作用如下: DriverManager:主要用于管理驱动程序和连 ...

  9. NO9——线段相关

    #include <stdio.h> #include <iostream> #include <math.h> #include <algorithm> ...

  10. Uva 12627 Erratic Expansion(递归)

    这道题大体意思是利用一种递归规则生成不同的气球,问在某两行之间有多少个红气球. 我拿到这个题,一开始想的是递归求解,但在如何递归求解的思路上我的方法是错误的.在研读了例题上给出的提示后豁然开朗(顺便吐 ...