简话Angular 05 Angular表单验证
一句话: 可以使用所有html5表单验证功能,同时Angular还增强了部分验证,支持动态验证
1. 上源码
<div ng-controller="ExampleController">
<form action="" name="exampleForm">
<label>姓名(required ng-minlength=1 ng-maxlength=3): </label> <input type="text" name="name" ng-model="user.name" required ng-minlength=1 ng-maxlength=3> <br>
<label>英文名(ng-pattern="/[a-zA-Z]/"): </label> <input type="text" name="englishName" ng-model="user.englishName" ng-pattern="/[a-zA-Z]/"> <br>
<label>年龄(number): </label> <input type="number" name="age" ng-model="user.age" required > <br>
<label>邮件(email): </label> <input type="email" name="email" ng-model="user.email" /> <br>
<label>博客地地址(url): </label> <input type="url" name="homepage" ng-model="user.homepage" /> <br> <input type="submit" value="提交" />
</form> <script>
var myApp = angular.module('myApp', []);
myApp.controller('ExampleController', function($scope) {
$scope.global = {};
$scope.global.fDate = new Date(); $scope.isCapitalized = function(str) {
return str[0] == str[0].toUpperCase();
}; });
</script>
</div>
2. 在线查看运行效果
http://jimuyouyou.github.io/angular-bootstrap-rest-seed/examples/angular/5-form-validation.html
3. 项目地址
github: https://github.com/jimuyouyou/angular-bootstrap-rest-seed
简话Angular 05 Angular表单验证的更多相关文章
- angular中的表单验证
angular中的表单验证很强大, 一共有5中验证信息,$valid,$invalid,$pristine,$dirty,$error. $valid-----当验证通过的时候,为true,不通过的时 ...
- Angular 学习笔记——表单验证
<!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <met ...
- angular学习的一些小笔记(中)之表单验证
表单验证 我去,我感觉我这个人其实还是一个很傻逼的一个人,老是因为拼错了一个单词或者怎么样就浪费我很长时间,这样真的不行不行,要正确对待这个问题,好了,说正题吧,angular也有表单验证minlen ...
- angular js 表单验证
<!doctype html> <html ng-app="myapp"> <head> <meta charset="UTF- ...
- angular表单验证实例----可用的代码
前段时间,公司做一个单页面,就是一个表单验证,早开始在菜鸟教程上关注了angular,所以下派上用场了 angular里面对于表单验证,设置了很多指令. 也就是说不用自己写一些逻辑,直接绑定指令就行. ...
- angular 表单验证
最近在用angular写表单验证时 , 不小心把ng-model全替换删掉了, 然后发现之前写的验证都失效, 在查阅资料和反复修改摸索后, 发现angular中的表单验证, 都是基于ng-model的 ...
- angular学习笔记(二十)-表单验证
本篇主要介绍angular中的表单验证: 表单验证主要有以下一些内容: 1. required指令: 相当于html5的required属性,验证不能为空 2. ng-maxlength属性: 验证内 ...
- angularjs 表单验证(不完整版)
针对项目实践表单验证总结: angular 的 form表单验证:form内需要novalidate取消默认验证,用ng自己的验证,form的名字是非常必要的 栗子:以注册为栗子,下面是注册的部分: ...
- Angular表单验证
novalidate 去掉html5自带的验证 ng-minlength 规定输入文本的最小长度 ng-maxlength 规定输入文本的最大长度 ng-submit 接收一个方法名 ...
随机推荐
- 根据wsdl文件,soupUI生成webservice客户端代码
根据wsdl文件,soupUI生成webservice客户端代码 功能介绍: 对于面向WebServie接口开发时,当我们已经获取到WSDL文件后,可以使用soapUI工具生成对应的客户端和服务端代码 ...
- npm 查看全局安装过的包
查看全局安装的包 npm list -g --depth 0 非全局安装的包 npm list --depth 0 如果不加参数 --depth 0会显示安装的包以及相关的依赖包,会显示的很详细.
- Android项目开发二
微博客户端开发 本周学习计划 学习布局控件和UI设计相关知识. 微博验证,学习OAuth相关知识. 看懂微博客户端开发部分代码. 把借鉴代码导入到Android Studio中并运行成功. 实际完成情 ...
- Android实验一(在Android Studio中创建项目和模拟器)
北京电子科技学院(BESTI) 实 验 报 告 课程:移动平台开发 班级:1592 姓名:苏泽楠 学号:20159207 成绩: 指导教师 ...
- [noip模拟题]科技节 - 搜索 - 位运算优化
[问题描述] 一年一度的科技节即将到来.同学们报名各项活动的名单交到了方克顺校长那,结果校长一看皱了眉头:这帮学生热情竟然如此高涨,每个人都报那么多活动,还要不要认真学习了?!这样不行!……于是,校长 ...
- Python3基础 tuple 通过拆分元组向元组中加入新的元素
Python : 3.7.0 OS : Ubuntu 18.04.1 LTS IDE : PyCharm 2018.2.4 Conda ...
- Python3基础 str swapcase 英文字母大小写反转
Python : 3.7.0 OS : Ubuntu 18.04.1 LTS IDE : PyCharm 2018.2.4 Conda ...
- DataTables warning: table id=data-table - Requested unknown parameter '3' for row 0.
本文为博主原创,未经允许,不得转载: 在使用jquery 的datatable时,报错在页面弹出弹出框,并提示以下内容: DataTables warning: table id=data-table ...
- 51nod 1199 Money out of Thin Air(线段树+树剖分)
http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1199 题意: 思路:因为是一棵树,所以需要把它剖分一下再映射到线段树上, ...
- UVa 12325 宝箱
https://vjudge.net/problem/UVA-12325 题意:有一个体积为N的箱子和两种数量无限的宝物.宝物1的体积为S1,价值为V1‘宝物2的体积为S2,价值为V2.计算出最多能装 ...