简话Angular 05 Angular表单验证
2015-07-21 19:18
603 查看
一句话: 可以使用所有html5表单验证功能,同时Angular还增强了部分验证,支持动态验证
1. 上源码
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
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 04 Angular过滤器详解
- Angular一点基础知识
- AngularJS权威教程 笔记(AngularJS是一个很有意思的库,基于函数形参的依赖注入?酷!还有奇怪的$scope和指令)
- Angularjs路由.让人激动的技术.真给前端长脸了.
- AngularJS学习笔记
- AngularJs教程地址
- Angularjs过滤器的开发.
- Angular2 Decorator
- Angular2 How to Repeat a List
- Angular2 inject a Component into a Component
- Angular2 Template Syntax
- 1 Angular2 Set up
- 简话Angular 03 Angular内置表达式大全
- angular directive详解
- 创建 AngularJS 自定义过滤器,带自定义参数
- AngularJs记录学习04
- AngularJs记录学习03
- AngularJs记录学习02
- 【AngularJS】Yeoman安装
- 【AngularJS】【03】使用AngularJS进行开发