angular中的表单验证
2015-11-17 13:55
711 查看
angular中的表单验证很强大,
一共有5中验证信息,$valid,$invalid,$pristine,$dirty,$error.
$valid-----当验证通过的时候,为true,不通过的时候为false
$invalid----当验证不通过的时候,为true,通过的时候为true
$pristine---当值为初始值的时候,为true,一旦有过改动即为false
$dirty---当值有改动过即为true,其他即为false
$error---包含所有的验证信息,如以下例子,$error = {required:false,minlength:false,pattern:false}。哪条验证不通过,它的值就为true。
以上五个值可以通过表单的name来获取到,参考如下:
<form novalidate name="myForm">
<input type="text" name="myText" ng-model="text" required ng-minlength="5" ng-pattern="/^[a-zA-Z]+$/">
<div>{{ myForm.myText.$valid }}</div>
<div>{{ myForm.myText.$invalid }}</div>
<div>{{ myForm.myText.$pristine }}</div>
<div>{{ myForm.myText.$dirty }}</div>
<div>{{ myForm.myText.$error }}</div>
</form>
可以结合ng-repeat filter $error等来做一些表单验证
一共有5中验证信息,$valid,$invalid,$pristine,$dirty,$error.
$valid-----当验证通过的时候,为true,不通过的时候为false
$invalid----当验证不通过的时候,为true,通过的时候为true
$pristine---当值为初始值的时候,为true,一旦有过改动即为false
$dirty---当值有改动过即为true,其他即为false
$error---包含所有的验证信息,如以下例子,$error = {required:false,minlength:false,pattern:false}。哪条验证不通过,它的值就为true。
以上五个值可以通过表单的name来获取到,参考如下:
<form novalidate name="myForm">
<input type="text" name="myText" ng-model="text" required ng-minlength="5" ng-pattern="/^[a-zA-Z]+$/">
<div>{{ myForm.myText.$valid }}</div>
<div>{{ myForm.myText.$invalid }}</div>
<div>{{ myForm.myText.$pristine }}</div>
<div>{{ myForm.myText.$dirty }}</div>
<div>{{ myForm.myText.$error }}</div>
</form>
可以结合ng-repeat filter $error等来做一些表单验证
<script> var m1 = angular.module('myApp',[]); m1.controller('Aaa',['$scope',function($scope){ $scope.text = 'hello'; $scope.regText = { regT : 'default', regList : [ { name : 'default', text : '请输入用户名' }, { name : 'required', text : '不能为空' }, { name : 'pattern', text : '只能为字母' }, { name : 'pass', text : '√' }, ], change : function(err){ console.log(err); for(var attr in err){ if(err[attr]==true){ $scope.regText.regT = attr; return; } } $scope.regText.regT = 'pass'; } }; }]); </script> </head> <body> <div ng-controller="Aaa"> <form novalidate name="nForm"> <label>用户名: <input type="text" name="nText" ng-model="regText.name" required ng-minlength="5" ng-pattern="/^[a-zA-Z]+$/" ng-blur="regText.change(nForm.nText.$error)"> <span ng-repeat="re in regText.regList | filter:regText.regT ">{{re.text}}</span> </label><br><br> <label>密码: <input type="password" name="nPas" ng-model="text" required ng-minlength="5" ng-pattern="/^[a-zA-Z]+$/"> <span>请输入密码</span> </label> </form> </div>
相关文章推荐
- 深入理解 AngularJS 的 Scope
- AngularJs学习笔记[01]——数据绑定
- JavaScript和JQuery和angularjs操作select
- AngularJs $compile编译服务与指令
- 使用zTree实现导航树、angular实现数据动态绑定功能
- AngularJS
- angular
- angularjs显示内容如何newline?
- AngularJS获取密码
- angular学习资源
- angular.animation的使用
- AngularJs $cacheFactory 缓存服务
- angularjs 下实现即可通过select选择 也可以通过input输入
- juqery 与angularjs 的区别
- AngularJS 自定义表单验证$parsers
- Angular黑科技之transclude
- AngularJs 基础与进阶
- [转载]AngularJs的一些坑
- angular中的orderBy过滤器使用
- 如何在angular指令渲染模板完毕后再执行link方法,render完毕再在link中操作dom节点