js框架——angular.js(4)

2022-10-04 14:23:03

1. angular中的对象

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

 <body ng-app="MyApp">

     <div ng-controller="User">

       <form ng-submit="submit()" novalidate>

         <label>Firstname</label>

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

         <label>Lastname</label>

         <input type="text" ng-model="user.lastname"/>

         <label>Age</label>

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

         <br>

         <button class="btn">Submit</button>

       </form>

       User Model: {{user}}

       <br>

       Form was submitted: {{wasSubmitted}}

     </div>

   </body>

 var app = angular.module("MyApp", []);

 app.controller("User", function($scope) {

   $scope.user = {a:4};

   $scope.wasSubmitted = false;

   $scope.submit = function() {

     $scope.wasSubmitted = true;

   };

 });

上代码中，可以看到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. 字段的选择

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

最后的required代表必填

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

码农公寓