详解AngularJS验证、过滤器、指令

angularJS中提供了许多的验证指令,可以轻松的实现验证,只需要在表单元素上添加相应的ng属性,常见的如下所示:

<input Type="text" ng-model="" [name=""] [required=""] [ng-required=""] [ng-minlength=""] [ng-maxlength=""][ng-pattern=""][ng-change=""] [ng-trim=""]>

详解AngularJS验证、过滤器、指令

表单与表单元素都需要通过name引用,请注意设置name的值。获得错误的详细参数可以在示例中看到。

示例代码:

<!DOCTYPE html> <!--指定angular管理的范围--> <html ng-app="app01"> <head> <meta charset="UTF-8"> <title>验证</title> </head> <body> <!--指定控制器的作用范围--> <form ng-controller="Controller1"> <p> <label for="username">帐号:</label> <input type="text" ng-model="username" ng-required="true" /> <span ng-show="form1.username.$error.required">必填</span> </p> <p> <label for="username">密码:</label> <input type="text" ng-model="password" ng-required="true" ng-pattern="/^[a-z]{6,8}$/" ng-trim="true"/> <span ng-show="form1.password.$error.required">必填</span> <span ng-show="form1.password.$error.pattern">只允许6-8位小写字母</span> </p> <p> 密码的值:{{"["+password+"]"}}<br/> 是否合法:form1.password.$valid={{form1.password.$valid}}<br/> 是否非法:form1.password.$invalid={{form1.password.$invalid}}<br/> 错误消息:form1.password.$error={{form1.password.$error}}<br/> 是否修改:form1.password.$dirty={{form1.password.$dirty}}<br/> 是否默认:form1.password.$pristine={{form1.password.$pristine}}<br/> </p> <p> 表单信息:<br/> 错误消息:form1.$error={{form1.$error}}<br/> 是否合法:form1.$valid={{form1.$valid}}<br/> 是否非法:form1.$invalid={{form1.$invalid}}<br/> </p> <p> <button ng-disabled="form1.$invalid">提交</button> </p> </form> <!--引入angularjs框架--> <script src="https://www.jb51.net/js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> //定义模块,指定依赖项为空 var app01 = angular.module("app01", []); //定义控制器,指定控制器的名称,$scope是全局对象 app01.controller("Controller1", function($scope) { }); </script> </body> </html>

运行结果:

详解AngularJS验证、过滤器、指令

二、过滤器

使用过滤器格式化数据,变换数据格式,在模板中使用一个插值变量。语法格式如下:

{{ express | filter:parameter1:p2:p3… | … | …}}

过滤器分了内置过滤器与自定义过滤器,过滤器的调用方式也分了在模板中调用与在函数中调用。

2.1、内置过滤器

常见的内置过滤器有:

1)、currency(货币)

{{123.456 | currency:'¥'}}

2)、number(数字)

{{12.235| number:2}}

3)、uppercase , lowercase(大小写)格式化

{{"Hello"| uppercase}}

4)、json(数据)格式化

{{userObject| json}}

5)、limitTo(截取)格式化,数量限制

{{"StringObject" | limitTo : 3}}

6)、date 日期格式化

{{name | date : 'yyyy-MM-dd hh:mm:ss'}}

'yyyy': 4位数字的年份(如AD 1 => 0001, AD 2010 => 2010)
'yy': 2位数字的年份,范围为(00-99)。(如AD 2001 => 01, AD 2010 => 10)
'y': 1位数字的年份,例如 (AD 1 => 1, AD 199 => 199)
'MMMM': 月份 (January-December)
'MMM': 月份 (Jan-Dec)
'MM': 月份, padded (01-12)
'M': 月份 (1-12)
'dd': 日,范围为(01-31)
'd': 日 (1-31)
'EEEE': 星期,(Sunday-Saturday)
'EEE': 星期, (Sun-Sat)
'HH': 小时, 范围为(00-23)
'H': 小时 (0-23)
'hh': am/pm形式的小时, 范围为(01-12)
'h': am/pm形式的小时, (1-12)
'mm': 分钟,范围为 (00-59)
'm': 分钟 (0-59)
'ss': 秒, 范围为 (00-59)
's': 秒 (0-59)
'.sss' or ',sss': 毫秒,范围为 (000-999)
'a': am/pm 标记
'Z': 4 位数字的时区偏移(+符号)(-1200-+1200)
'ww': ISO-8601 年内的周数 (00-53)
'w': ISO-8601 年内的周数 (0-53)

format 字符串也可以是以下预定义的本地化格式之一:
'medium': 等于en_US本地化后的 'MMM d, y h:mm:ss a' (如:Sep 3, 2010 12:05:08 pm)
'short': 等于en_US本地化后的 'M/d/yy h:mm a' (如: 9/3/10 12:05 pm)
'fullDate': 等于en_US本地化后的 'EEEE, MMMM d, y' (如: Friday, September 3, 2010)
'longDate': 等于en_US本地化后的 'MMMM d, y' (如: September 3, 2010)
'mediumDate': 等于en_US本地化后的 'MMM d, y' (如: Sep 3, 2010)
'shortDate': 等于en_US本地化后的 'M/d/yy' (如: 9/3/10)
'mediumTime': 等于en_US本地化后的 'h:mm:ss a' (如: 12:05:08 pm)
'shortTime': 等于en_US本地化后的 'h:mm a' (如: 12:05 pm)
format 字符串可以包含固定值。这需要用单引号括起来 (如: "h 'in the morning'")。如果要输出单引号,使序列中使用两个单引号(如: "h 'o''clock'")。

7)、orderBy(排序)格式化

orderBy:'age':reverse
reverse是true表示降序、false表示升序

8)、filter(筛选&过滤)格式化

{{name | filter : 'l' | json}}

2.1.1、在模板中使用过滤器

示例代码:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wwjzjp.html