Angular 表单验证 基础篇
<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 表单验证 基础篇的更多相关文章
- Angular 表单验证类库 ngx-validator 1.0 正式发布
背景介绍 之前写了一篇 <如何优雅的使用 Angular 表单验证>,结尾处介绍了统一验证反馈的类库 ngx-validator ,由于这段时间一直在新模块做微前端以及相关业务组件库, ...
- 如何优雅的使用 Angular 表单验证
随便说说,这一节可以跳过 去年参加 ngChine 2018 杭州开发者大会的时候记得有人问我: Worktile 是什么时候开始使用 Angular 的,我说是今年(2018年) 3 月份开始在新模 ...
- angularjs学习第五天笔记(第二篇:表单验证升级篇)
您好,我是一名后端开发工程师,由于工作需要,现在系统的从0开始学习前端js框架之angular,每天把学习的一些心得分享出来,如果有什么说的不对的地方,请多多指正,多多包涵我这个前端菜鸟,欢迎大家的点 ...
- Angular表单验证
novalidate 去掉html5自带的验证 ng-minlength 规定输入文本的最小长度 ng-maxlength 规定输入文本的最大长度 ng-submit 接收一个方法名 ...
- 简单的angular表单验证指令
<html ng-app="myApp"> <head> <meta charset="UTF-8"> <title& ...
- angular表单验证实例----可用的代码
前段时间,公司做一个单页面,就是一个表单验证,早开始在菜鸟教程上关注了angular,所以下派上用场了 angular里面对于表单验证,设置了很多指令. 也就是说不用自己写一些逻辑,直接绑定指令就行. ...
- 从浅入深剖析angular表单验证
最近手上维护的组件剩下的BUG都是表单验证,而且公司的表单验证那块代码经历的几代人,里面的逻辑开始变得不清晰,而且代码结构不是很angular. 是很有必要深入了解表单验证. 入门之前,我觉得应该先了 ...
- angular 表单验证
最近在用angular写表单验证时 , 不小心把ng-model全替换删掉了, 然后发现之前写的验证都失效, 在查阅资料和反复修改摸索后, 发现angular中的表单验证, 都是基于ng-model的 ...
- 简话Angular 05 Angular表单验证
一句话: 可以使用所有html5表单验证功能,同时Angular还增强了部分验证,支持动态验证 1. 上源码 <div ng-controller="ExampleController ...
随机推荐
- ko绑定----记录
1.绑定变量 globalData = ko.observable({item:{}}); 2.绑定html ko.applyBindings(globalData, document.getElem ...
- C语言实例解析精粹学习笔记——32
实例32: 编制一个包含姓名.地址.邮编和电话的通讯录输入和输出函数. 思路解析: 1.用结构体来完成姓名.地址.邮编和电话的组合. 2.结构体指针的使用. 3.malloc的使用 4.scanf函数 ...
- spring配置jackson不返回null值
#json不返回null spring.jackson.default-property-inclusion=non_null
- 关于springboot 连接mysql 数据库报错问题
springboot连接MySQL运行报错: The server time zone value 'Öйú±ê׼ʱ¼ä' is unrecognized or represents more ...
- python操作nosql数据库之memcache
一.memcache的安装 1.memcache简介 Memcached是一个高性能的分布式内存对象缓存系统,用于动态Web应用以减轻数据库负载.它通过在内存中缓存数据和对象减少读取数据库的次数,从而 ...
- tensorflow nmt基本配置(tf-1.4)
随着tensorflow的不断更新,直接按照nmt的教程搭建nmt环境会报错的...因此,需要一些不太好的办法来避免更多的问题出现.tensorflow看来在ubuntu和debian中运行是没有问题 ...
- Docker 安装Neo4j
拉取最新的neo4j镜像 docker pull neo4j 运行Neo4j 容器 docker run -it -d -p 7474:7474 -p 7687:7687 neo4j:latest 打 ...
- 总结java操作MySQL 即JDBC的使用
java.sql包中存在DriverManager类,Connection接口,Statement接口和ResultSet接口.类和接口作用如下: DriverManager:主要用于管理驱动程序和连 ...
- NO9——线段相关
#include <stdio.h> #include <iostream> #include <math.h> #include <algorithm> ...
- Uva 12627 Erratic Expansion(递归)
这道题大体意思是利用一种递归规则生成不同的气球,问在某两行之间有多少个红气球. 我拿到这个题,一开始想的是递归求解,但在如何递归求解的思路上我的方法是错误的.在研读了例题上给出的提示后豁然开朗(顺便吐 ...