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>
代表表单提交的时候不需要验证