angular中的表单验证

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等来做一些表单验证

<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>

转载于:https://www.cnblogs.com/toodeep/p/4971507.html

angular中的表单验证相关推荐

angular学习的一些小笔记(中)之表单验证
表单验证我去,我感觉我这个人其实还是一个很傻逼的一个人,老是因为拼错了一个单词或者怎么样就浪费我很长时间,这样真的不行不行,要正确对待这个问题,好了,说正题吧,angular也有表单验证minlen ...
MOSS2007中实现表单验证
MOSS2007中实现表单验证转自阿喜的Spaces Microsoft Office SharePoint Server 2007 Forms Authentication 本文将演示如何在MOS ...
组件库实战 | 教你如何设计Web世界中的表单验证
教你如何设计Web世界中的表单验证
掌财社:html5中AmazeUI框架中JS表单验证实战案例展示！
今天和大家分享个有关于"html5中AmazeUI框架中JS表单验证实战案例展示!"这方面的相关内容知识,让大家对于html5中AmazeUI框架也可以有所了解! 1.需求做一个 ...
AngularJS中的表单验证机制
客户端表单验证是AngularJS里面最酷的功能之一. AngularJS表单验证可以让你从一开始就写出一个具有交互性和可响应的现代化HTML5表单. angularJs实现了大多数的HTML5表单域 ...
关于uni-app中uni-forms表单验证时“多级结构对象数据”如何做数据校验的解决方案
- 前言这几天在做uni-app表单验证时遇到了一个问题,按官方文档给出的方法,当需要数据校验时,只需要 1.为uni-forms中的"modelValue"数据设置" ...
JavaScript中的表单验证、正则表达式、数组的使用
表单验证.正则表达式.数组字符串的使用为什么要使用表单验证表单验证的常用步骤提交表单的2种方式文本框对象为什么要使用正则表达式正则表达式的两种创建方法正则表达式的模式正则表达式常用的 ...
elementUI中from表单验证不起作用的几种常见错误
最近在使用element写表单的校验,但是经常不起作用,总结一下大概经常会出现下面的几种错误.所以在这里记录一下首先要特别注意检查一下自己是不是有什么单词拼错了,如required写成require ...
vue 中 Element-UI 表单验证的几种方法
在开始之前需要把element-ui在vue中引入好,如果没有引入好的话,需要先跟着element-ui的文档进行操作,接下来就可以进行学习了. 第一种:在el-form-item单个添加验证这种方 ...

angular中的表单验证

angular中的表单验证相关推荐

最新文章

热门文章