zoukankan      html  css  js  c++  java
  • 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>

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

  • 相关阅读:
    USACO 3.3 A Game
    USACO 3.3 Camelot
    USACO 3.3 Shopping Offers
    USACO 3.3 TEXT Eulerian Tour中的Cows on Parade一点理解
    USACO 3.3 Riding the Fences
    USACO 3.2 Magic Squares
    USACO 3.2 Stringsobits
    USACO 3.2 Factorials
    USACO 3.2 Contact
    USACO 3.1 Humble Numbers
  • 原文地址:https://www.cnblogs.com/thestudy/p/5657725.html
Copyright © 2011-2022 走看看