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>
angular中的表单验证的更多相关文章
- angular学习的一些小笔记(中)之表单验证
表单验证 我去,我感觉我这个人其实还是一个很傻逼的一个人,老是因为拼错了一个单词或者怎么样就浪费我很长时间,这样真的不行不行,要正确对待这个问题,好了,说正题吧,angular也有表单验证minlen ...
- AngularJS中的表单验证
AngularJS中的表单验证 AngularJS自带了很多验证,什么必填,最大长度,最小长度...,这里记录几个有用的正则式验证 1.使用angularjs的表单验证 正则式验证 只需要配置一个正则 ...
- angularJS中的表单验证（包括自定义验证）
表单验证是angularJS一项重要的功能,能保证我们的web应用不会被恶意或错误的输入破坏.Angular表单验证提供了很多表单验证指令,并且能将html5表单验证功能同他自己的验证指令结合起来使用 ...
- 关于Django中的表单验证
ModelForm 和 普通的Form 都可以做表单验证 对于ModelForm如果只是想验证其中一部分model中的field,可以指定:内部类Meta的fields元素: fields = ('x ...
- JQuery中的表单验证及相关的内容
前 言 JRedu Android应用开发中,经常要用到表单.既然用到了表单,那就不可避免的要用到表单的验证.但是,在提交表单时,但是,并不是,每次提交的表单内容都是正确的,如果 每次都将表单的 ...
- jq中的表单验证插件------jquery.validate
今天我们来说一下表单验证,有人说我们在进行表单验证的时候使用正则来验证是非常麻烦的,现在我来给大家介绍一下表单验证的插件:jquery.validate.min.js 它是与jquery一起结合用来使 ...
- JS中的表单验证+正则表达式
表单验证+正则表达式 一.非空验证 trim:去空格(去掉前后的空格),任何字符串都可以用这个方法.写法为:if(v.trim().length==0),表示如果去掉空格后的字符串的长度为0. < ...
- 模拟js中注册表单验证
示例1 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...
- vue项目element-ui框架中的弹窗中的表单验证清除问题
问题回顾: 1.vue项目的在弹窗上的form表单验证,第一次点击新增时正常,第二次新增打开弹窗后由于表单内容为空,出现验证这种情况 2.为了解决上面的情况,在执行点击新增事件加上this.$refs ...
随机推荐
- iOS平台使用陀螺仪传感器
在移动端开发过程中,有时候会用到陀螺仪传感器获取当前手机的姿态,下面给出iOS端如何获取陀螺仪姿态数据的代码: //根据陀螺仪的四元数转换为矩阵 + (GLKMatrix4)calculateMatr ...
- 转：10年程序员谈.Net程序员的职业规划
从事Dotnet程序开发工作近10年了,从开始的月薪3k的小程序员菜鸟,到现在年薪60w的项目总经理,从战战兢兢的去各个公司应聘,到现在开始面试那些战战兢兢的小程序员,回想起这近十年来的经验,看着还是 ...
- sqlserver如何关闭死锁进程.
1.首先我们需要判断是哪个用户锁住了哪张表. --查询被锁表 select request_session_id spid,OBJECT_NAME(resource_associated_entity ...
- vs2008注册组件
开始—运行 输入 regsvr32+路径
- python几个重要的模块备忘
一:模块使用方法 二:时间模块time 三:系统接口模块os和sys 四:数据保存的几个模块json,pickle,xml,configparse 五:数据复制移动模块shutil 六:日志模块log ...
- 查找jsp页面报错技巧
在报错跳转页面打印错误信息<div>系统执行发生错误,信息描述如下:</div> <div>错误状态代码是:${pageContext.errorData.stat ...
- thinkPHP--CURD操作
1.数据创建 2.数据写入 3.数据读取 4.数据更新 5.数据删除 一．数据创建 在数据库添加等操作之前,我们首先需要对数据进行创建.何为数据创建,就是接受提 交过来的数据,比如表单提交的 POST ...
- redhat yum 从 iso 安装
背景: 1)yum 在没有注册的redhat中无法使用,不能去自动搜索redhat的库 2)使用者不能上网 方法摘自网络,就是下载ISO文件,yum的下载点指向ISO的mount后(也就是解压缩)的目 ...
- VUE 入门基础(5)
五,Class 与 Style 绑定 绑定HTML class 对象语法 我们可以传给v-bind:class 一个对象,以动态的切换class <div v-bind:class=" ...
- 如何在属性面板中增加一个属性-UI界面编辑器(XproerUI)教程
版权所有 2009-2015 荆门泽优软件有限公司 保留所有权利 产品首页:http://www.ncmem.com/apps/xproerui/index.asp 开发文档(SkinStudio): ...