您的位置:首页 > Web前端 > AngularJS

简话Angular 05 Angular表单验证

2015-07-21 19:18 603 查看
一句话: 可以使用所有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
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: