一句话: 可以使用所有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表单验证的更多相关文章

  1. angular中的表单验证

    angular中的表单验证很强大, 一共有5中验证信息,$valid,$invalid,$pristine,$dirty,$error. $valid-----当验证通过的时候,为true,不通过的时 ...

  2. Angular 学习笔记——表单验证

    <!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <met ...

  3. angular学习的一些小笔记(中)之表单验证

    表单验证 我去,我感觉我这个人其实还是一个很傻逼的一个人,老是因为拼错了一个单词或者怎么样就浪费我很长时间,这样真的不行不行,要正确对待这个问题,好了,说正题吧,angular也有表单验证minlen ...

  4. angular js 表单验证

    <!doctype html> <html ng-app="myapp"> <head> <meta charset="UTF- ...

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

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

  6. angular 表单验证

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

  7. angular学习笔记(二十)-表单验证

    本篇主要介绍angular中的表单验证: 表单验证主要有以下一些内容: 1. required指令: 相当于html5的required属性,验证不能为空 2. ng-maxlength属性: 验证内 ...

  8. angularjs 表单验证(不完整版)

    针对项目实践表单验证总结: angular 的 form表单验证:form内需要novalidate取消默认验证,用ng自己的验证,form的名字是非常必要的 栗子:以注册为栗子,下面是注册的部分: ...

  9. Angular表单验证

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

随机推荐

  1. 根据wsdl文件,soupUI生成webservice客户端代码

    根据wsdl文件,soupUI生成webservice客户端代码 功能介绍: 对于面向WebServie接口开发时,当我们已经获取到WSDL文件后,可以使用soapUI工具生成对应的客户端和服务端代码 ...

  2. npm 查看全局安装过的包

    查看全局安装的包 npm list -g --depth 0 非全局安装的包 npm list --depth 0 如果不加参数 --depth 0会显示安装的包以及相关的依赖包,会显示的很详细.

  3. Android项目开发二

    微博客户端开发 本周学习计划 学习布局控件和UI设计相关知识. 微博验证,学习OAuth相关知识. 看懂微博客户端开发部分代码. 把借鉴代码导入到Android Studio中并运行成功. 实际完成情 ...

  4. Android实验一(在Android Studio中创建项目和模拟器)

    北京电子科技学院(BESTI) 实     验    报     告 课程:移动平台开发         班级:1592 姓名:苏泽楠 学号:20159207 成绩:             指导教师 ...

  5. [noip模拟题]科技节 - 搜索 - 位运算优化

    [问题描述] 一年一度的科技节即将到来.同学们报名各项活动的名单交到了方克顺校长那,结果校长一看皱了眉头:这帮学生热情竟然如此高涨,每个人都报那么多活动,还要不要认真学习了?!这样不行!……于是,校长 ...

  6. Python3基础 tuple 通过拆分元组向元组中加入新的元素

             Python : 3.7.0          OS : Ubuntu 18.04.1 LTS         IDE : PyCharm 2018.2.4       Conda ...

  7. Python3基础 str swapcase 英文字母大小写反转

             Python : 3.7.0          OS : Ubuntu 18.04.1 LTS         IDE : PyCharm 2018.2.4       Conda ...

  8. DataTables warning: table id=data-table - Requested unknown parameter '3' for row 0.

    本文为博主原创,未经允许,不得转载: 在使用jquery 的datatable时,报错在页面弹出弹出框,并提示以下内容: DataTables warning: table id=data-table ...

  9. 51nod 1199 Money out of Thin Air(线段树+树剖分)

    http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1199 题意: 思路:因为是一棵树,所以需要把它剖分一下再映射到线段树上, ...

  10. UVa 12325 宝箱

    https://vjudge.net/problem/UVA-12325 题意:有一个体积为N的箱子和两种数量无限的宝物.宝物1的体积为S1,价值为V1‘宝物2的体积为S2,价值为V2.计算出最多能装 ...