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>

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

  • 相关阅读:
    手机端不加载js文件,PC端要加载js文件
    JS数组去重和取重
    jquery遍历一个数组
    2个轮播地址
    动感Loading文字
    仿265网站LOGO,会盯着你看的眼睛
    git学习
    c++ primer 5th 笔记:第十一章
    c++ primer 5th 笔记:第十章
    c++ primer 5th 笔记:第九章
  • 原文地址:https://www.cnblogs.com/thestudy/p/5657725.html
Copyright © 2011-2022 走看看