js框架——angular.js(4)

1. angular中的对象

其实也不用多说的,前台是可以提取后台定义的对象的——

 1 <body ng-app="MyApp">
 2     <div ng-controller="User">
 3       <form ng-submit="submit()" novalidate>
 4         <label>Firstname</label>
 5         <input type="text" ng-model="user.firstname"/>
 6         <label>Lastname</label>
 7         <input type="text" ng-model="user.lastname"/>
 8         <label>Age</label>
 9         <input type="text" ng-model="user.age"/>
10         <br>
11         <button class="btn">Submit</button>
12       </form>
13
14       User Model: {{user}}
15       <br>
16       Form was submitted: {{wasSubmitted}}
17     </div>
18   </body>
 1 var app = angular.module("MyApp", []);
 2
 3 app.controller("User", function($scope) {
 4   $scope.user = {a:4};
 5   $scope.wasSubmitted = false;
 6
 7   $scope.submit = function() {
 8     $scope.wasSubmitted = true;
 9   };
10 });

上代码中,可以看到14行的{{user}}成功提取了user对象里的数据,而这个数据是由后台生成,前台的三个ng-model添加的。

2. 表单验证

$error

$error对象中保存着没有通过验证的验证器名称以及对应的错误信息。

$pristine

$pristine的值是布尔型的,可以告诉我们用户是否对控件进行了修改。

$dirty

$dirty的值和$pristine相反,可以告诉我们用户是否和控件进行过交互。

$valid

$valid值可以告诉我们当前的控件中是否有错误。当有错误时值为false,没有错误时值为true。

$invalid

$invalid值可以告诉我们当前控件中是否存在至少一个错误,它的值和$valid相反。

常用的表单验证指令

1. 必填项验证

某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可:

<input type="text" required />  

2. 最小长度

验证表单输入的文本长度是否大于某个最小值,在输入字段上使用指令ng-minleng= "{number}":

<input type="text" ng-minlength="5" /> 

3. 最大长度

验证表单输入的文本长度是否小于或等于某个最大值,在输入字段上使用指令ng-maxlength="{number}":

<input type="text" ng-maxlength="20" />

4. 模式匹配

使用ng-pattern="/PATTERN/"来确保输入能够匹配指定的正则表达式:

<input type="text" ng-pattern="/[a-zA-Z]/" /> 

5. 电子邮件

验证输入内容是否是电子邮件,只要像下面这样将input的类型设置为email即可:

<input type="email" name="email" ng-model="user.email" /> 

6. 数字

验证输入内容是否是数字,将input的类型设置为number:

<input type="number" name="age" ng-model="user.age" /> 

7. URL

验证输入内容是否是URL,将input的类型设置为 url:

<input type="url" name="homepage" ng-model="user.facebook_url" />以上内容摘抄自:http://www.cnblogs.com/rohelm/p/4033513.html作者写的是真心不错,这个页面中还有相当多的实例,不懂的同学可以去看看

2. 验证的运用

有了以上内容,我们就可以对表单进行一些简单的设置了。

angular中有个ng-show这个属性,属性值为true的时候,才会显示这个标签,和jquery中的show()非常类似。

于是,我们可以在标签里这么写——

<span class="help-block" ng-show="form.firstname.$invalid && form.firstname.$dirty">Firstname is required</span>

当form表单中,firstname发生更改, form.firstname.$dirty变为true,

当form表单中,firstname发生错误, form.firstname.$invalid变为true,

而两个值都为ture的时候,ng-show才为true,显示出来。

于是——当内容发生过了修改,但是内容仍然为空,这个条件触发的时候,上面这个span标签才会显示出来。

3. 字段的选择

当我们使用表单的时候,有些需要进行一些细节上的操作,例如,有些表单需要不验证,有些需要必填。一般来说,只要在标签后面添加对应属性就可以了——

<input name="firstname" type="text" ng-model="user.firstname" required/>

最后的required代表必填

<form name="form" ng-submit="submit()" class="form-horizontal" novalidate novalidate>

代表表单提交的时候不需要验证

时间: 2024-10-28 12:46:16

js框架——angular.js(4)的相关文章

js框架——angular.js(5)

1. 3种过滤方式 1 <html> 2 <head> 3 <meta charset='utf-8'> 4 <script src="js/angular.js"></script> 5 <script src="js/app.js"></script> 6 <link rel="stylesheet" href="css/bootstrap.c

js框架——angular.js(3)

1. 过滤filter 过滤就是将内容进行筛选或者转换或者两者都有,一般的表示方式就是在变量后面添加"|",然后加上过滤条件,如—— {{name|currency}} 这个currency过滤器可以将值转变成货币的格式. 另外,这个货币的格式也可以设置—— {{name|currency: "Euro €" }} 这样,输入1234,就会显示: 123,4 Euro € 2. 自定义过滤器 过滤器当然可以自定义,毕竟系统给定的过滤器根本不够用. 1 <bod

青出于蓝而胜于蓝 — Vue.js对Angular.js的那些进步

Angular.js与Vue.js是非常有渊源的两款前端框架,据Vue.js的官方网站描述,在其早期开发时,灵感来源就是Angular.js.而在很多方面,Vue.js也正像是中国的那句古话,"青出于蓝而胜于蓝".今天,K就从下面几个方面来跟大家一起探讨一下,Vue.js到底在哪些方面更"胜于蓝". (一)简单的操作 这是K看来Vue.js最杰出的的方法,Vue.js致力于视图层的展现,这使它在与其他项目进行整合的时候会变得非常easy,这也使它更容易"嵌

Require.js、Angular.js整合

Require.js 详见: 初识Require.js 解密Require.js Angular.js 详见: 初识Angular.js之爱恨情仇 整合Require.js.Angular.js 配置 在Requirejs中配置angular.js. require-main.js // 配置 requirejs.config({ ... paths: { 'jquery': 'libs/jquery-2.1.3/jquery.min', 'angular': 'libs/angular-1.3

Angular JS - 3 - Angular JS 双向数据绑定

一 .数据绑定 1. 数据绑定: 数据从一个地方A转移(传递)到另一个地方B, 而且这个操作由框架来完成2. 双向数据绑定: 数据可以从View(视图层)流向Model(模型,也就是数据), 也可以从Model流向View 视图(View): 也就是我们的页面(主要是Andular指令和表达式) 模型(Model) : 作用域对象(当前为$rootScope), 它可以包含一些属性或方法 当改变View中的数据, Model对象的对应属性也会随之改变: ng-model指令 数据从View==>

Angular JS - 7 - Angular JS 常用指令2

1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <!-- 8 常用指令(二) 9 * ng-class: 动态引用定义的样式 {aClass:true, bClass:false} 10 * ng-style: 动态引用通过j

Angular JS - 6 - Angular JS 常用指令

1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <!-- 8 1. Angular指令 9 * Angular为HTML页面扩展的: 自定义标签属性或标签 10 * 与Angular的作用域对象(scope)交互,扩展页面的动

主流前端框架对比:Vue.js , React, Angular.js

个人认为Vue.js的文档最恳切.我认为结合文档和遇到问题Google答案的匹配度来讲:Vue.js > ReactJS > AngularJS > Angular 2 如何使用Vue.js? 1.安装 (1)script 如果项目直接通过script加载CDN文件,代码示例如下: <script src="http://webapp.didistatic.com/static/webapp/shield/z/vue/vue/1.0.24/vue.min.js"

Vue.js和angular.js的区别

关于Vue的描述: HTML模版+JSON数据,再创建一个Vue实例,就这么简单 关于Angular的描述: AngularJS是为了克服HTML在构建应用上的不足而设计的.HTML是一门很好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了.所以我做了一些工作(你也可以觉得是小花招)来让浏览器做我想要的事. 由此可以看出Vue比Angular相对来说简单一些,在 API 与设计两方面上 Vue.js 都比 Angular 简单得多,因此你可以快速地掌握它的全部特性并投入开发