angular完结表单验证及提交效用,详解AngularJS达成表单验证

By admin in 4858美高梅 on 2019年6月22日

本例通过Angular框架来落实简单的表单验证

angular实现表单验证及提交效能,angular表单

本例通过Angular框架来促成简单的表单验证

一、html结构

1、借助于bootstrap飞速的编写制定了四个简短的表单
代码主要部分如下: 

<div class="container" style="margin-top: 30px;" ng-controller="myCtrl">
  <h1 style="text-align: center">用户表单提交</h1>
  <form action="upload.js" class="form-horizontal" name="myForm">
    <div class="form-group">
      <label for="username" class="col-sm-3 control-label">用户名</label>
      <div class="col-sm-9">
        <input type="text" autocomplete="false" name="username" placeholder="用户名" ng-model="data.username" id="username" class="form-control" required>
        <div class="alert alert-danger help-block" >
          用户名长度不能小于5位
        </div>
        <div class="alert alert-danger help-block" >
          用户名长度不能大于15位
        </div>
      </div>
    </div>
  </form>
 </div>

2、表单验证常见难题及指令

1)、问题:
》如何绑定数据——双向绑定
》验证表单——正则表明式
》呈现错误新闻
》整个Form的验证
》制止提交没通过认证的表单
》幸免频仍付出
2)、常用命令
》指令:
ng-model,ng-required,ng-pattern,ng-maxlength,ng-minlength,ng-change
》样式:
ng-valid,ng-invalid,ng-pristine,ng-dirty
》form调节变量
formName.inputFieldName.$error:字段错误消息
formName.inputFieldName.$dirty:字段是不是修改
formName.inputFieldName.$pristine:字段是或不是是初阶状态
formName.inputFieldName.$valid:字段是或不是管用
formName.input菲尔德Name.$invalid:字段是还是不是失效

二、作用达成

2.1 用户名验证
用户输入用户名字段验证首假设长度验证,以及是还是不是必须

1、ng-model绑定表单数据,以便利用angular的验证api
2、ng-minlength,ng-maxlength规定字段长段,required规定字段必填
3、错误提示音讯通过formName.inputFieldName.$error.minlength/maxlength决定是不是要彰显,当输入不合规时,$error对应的谬误音讯会为true
如下:

  <div class="form-group">
    <label for="username" class="col-sm-3 control-label">用户名</label>
    <div class="col-sm-9">
      <input type="text" autocomplete="false" name="username" placeholder="用户名" ng-model="data.username" id="username" ng-minlength="5" ng-maxlength="15" class="form-control" required>
      <div class="alert alert-danger help-block" ng-show="myForm.username.$error.minlength">
        用户名长度不能小于5位
      </div>
      <div class="alert alert-danger help-block" ng-show="myForm.username.$error.maxlength">
        用户名长度不能大于15位
      </div>
    </div>
  </div>

2.2 密码确认验证

用户密码确认验证要求确定保障三遍输入的密码一致,且在未输入确认密码前不表达

1、绑定数据ng-model=data.pwdConfirm(全数表单数据都封存到data对象中)
2、通过判断data.pwdConfirm!==data.password分明一回密码是或不是输入一致
3、通过formName.inputField.$dirty显著此项是否填写过

  <div class="form-group">
    <label class="col-sm-3 control-label">确认密码</label>
    <div class="col-sm-9">
      <input type="password" name="pwdConfirm" ng-model="data.pwdConfirm" placeholder="确认密码" id="pwdConfirm" required class="form-control">
      <div class="alert alert-danger" ng-show="data.pwdConfirm!==data.password&&myForm.pwd.$dirty">
        两次输入的密码不一致
      </div>
    </div>
  </div>

2.3 邮箱验证

邮箱验证主要表达邮箱格式是还是不是准确,字段长度

1、使用H5中新增type属性值email作为
2、通过ng-pattern指令定义邮箱验证的正则
3、邮箱验证常用正则表明式:^([a-zA-Z0-9_-])[email protected]([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+
4、通过myForm.email.$error.pattern验证邮箱格式是还是不是准确

  <div class="form-group">
    <label class="col-sm-3 control-label">邮箱</label>
    <div class="col-sm-9">
      <input type="email" name="email" ng-model="data.email" placeholder="邮箱" class="form-control" required ng-pattern="/^([a-zA-Z0-9_-])[email protected]([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/">
      <div class="alert alert-danger help-block" ng-show="myForm.email.$error.minlength">
        邮箱长度不能小于5位
      </div>
      <div class="alert alert-danger help-block" ng-show="myForm.email.$error.pattern">
        请填写正确的邮箱格式
      </div>
      <div class="alert alert-danger help-block" ng-show="myForm.email.$error.maxlength">
        邮箱长度不能大于30位
      </div>
    </div>
  </div>

2.4 单复选框

单复选框主要规定数据绑定难题,以及复选框的数额渲染
1、通过以data对象的属性情势来绑定数据
2、多选的选项值通过ng-repeat实行遍历
3、设置value值以便提交时对值实行区分

  <div class="form-group">
    <label class="col-sm-3 control-label">性别</label>
     <div class="col-sm-9">
       <label class="radio-inline">
         <input type="radio" name="sex" value="1" ng-model="data.sex" />男
       </label>
       <label class="radio-inline">
         <input type="radio" name="sex" value="0" ng-model="data.sex" />女
       </label>
     </div>
  </div>
   <div class="form-group">
    <label class="col-sm-3 control-label">爱好</label>
     <div class="col-sm-9">
       <label class="radio-inline" ng-repeat="hobby in hobbies">
         <input type="checkbox" name="hobby" ng-model="hobbiesC" value="{{hobby.id}}" /> {{hobby.name}}
       </label>
     </div>
  </div>
  <div class="col-sm-9 col-sm-offset-3">
    <input type="reset" class=" btn btn-danger" value="重置">
    <input type="submit" class="btn btn-primary " value="提交">
  </div>

2.5 城市二级联合浮动

1、城市数量定义:各类城市指标包罗id,parent,name属性,id为每个城市省份独有,parent是基于父级省份或城市而定
2、通过ng-options指令来遍历出城市数据

2.5.1 城市数据模型

通过\$scope.cities定义数据模型

   $scope.cities=[
    {
      id:1,
      parent:0,
      name:'四川省'
    },
    {
      id:2,
      parent:1,
      name:'成都市'
    },
    ...
  ]

2.5.2 html中渲染城市数据

由此ng-options指令和ng-model指令遍历数据和装置暗中认可值

  <div class="form-group">
    <label class="col-sm-3 control-label">出生地</label>
     <div class="col-sm-3">
       <select name="birthAddress" id="" ng-model="data.province" ng-options="c.id as c.name for c in cities">
         <option value="">-- 请选择 --</option>
       </select>
     </div>
  </div>

说明:
1、ng-options=”obj.name for obj in datas” 常见用法,通过 obj.id as
obj.name设置option标签的value值为id,内容为name
2、ng-model可用以安装select的默许值
2.5.3 定义过滤器用于过滤省份,城市等

.filter("cityFilter",function(){
  return function(input,parent){
    var filtedData=[];
    angular.forEach(input,function(value,key){
      if(value.parent===parent){
        filtedData.push(value)
      }
    })
    return filtedData;
  }
})

说明:
1、如上通过定义cityFilter,传入三个parent作为参数,遍历传入的数码,并宽判别是不是与传播的parent相等来规定当前都会是哪一流
2、重临的filtedData就是过滤结果。
3、用到了angular.forEach(obj,fn)迭代器,在那之中fn有多个参数字传送入,分别是value,key,obj;value即为当下遍历出的指标,key为遍历的独一无二标志,obj为被遍历的数组或对象自己。
使用(省份): ng-options=”c.id as c.name
for c in cities|cityFilter:0″

2)、城市相应接纳
1、遵照data.province作为过滤参数,举办城市筛选
2、区域的精选同理,可设置当采纳了都市后,再出新区域选项框(ng-show指令)

  <div class="col-sm-2">
    <select name="birthC" ng-model="data.cities" ng-options="c.id as c.name for c in cities|cityFilter:data.province">
      <option value="">-- 请选择 --</option>
    </select>
  </div>
  <div class="col-sm-2" ng-show="!myForm.birthC.$pristine">
    <select name="birthD" ng-model="data.district" ng-options="c.id as c.name for c in cities|cityFilter:data.cities">
      <option value="">-- 请选择 --</option>
    </select>
  </div>

angular完结表单验证及提交效用,详解AngularJS达成表单验证。2.6 表单提交

1、效能要求:当表单验证不通过时,使提交按钮失效(ng-disabled),

html结构:

  <div class="col-sm-9 col-sm-offset-3">
    <input type="reset" class=" btn btn-danger" value="重置" ng-click="reset()">
    <input type="submit" class="btn btn-primary " value="提交" ng-disabled="myForm.$invalid">
  </div>

js:

  $scope.reset=function(){
    $scope.myForm.$setPristine();
  }

注:表单中有三个$setPristine()方法将表单复位原始状态,class,$dirty,$pristine会恢复生机原有状态。但只顾表单的错误新闻$error并不会被埋伏,所以在注解表单时,记得在每一样错误新闻都以由$dirty才看清的。

上述正是本文的全部内容,希望对我们的学习抱有援救,也指望我们多多扶助帮客之家。

本例通过Angular框架来促成轻松的表单验证 一、html结构
1、借助于bootstrap急忙的编辑了几个轻松…

始发学习AngularJS表单验证:

前言

一、html结构

常用的表单验证指令
**
1. 必填项验证
**

先天来和大家学习一下AngularJS……

1、借助于bootstrap快捷的编排了贰个差不离的表单
代码重要部分如下: 

有些表单输入是或不是已填写,只要在输入字段成分上增添HTML5标识required就能够:

AngularJS 通过新的习性和表达式扩大了 HTML。

<div class="container" style="margin-top: 30px;" ng-controller="myCtrl">
  <h1 style="text-align: center">用户表单提交</h1>
  <form action="upload.js" class="form-horizontal" name="myForm">
    <div class="form-group">
      <label for="username" class="col-sm-3 control-label">用户名</label>
      <div class="col-sm-9">
        <input type="text" autocomplete="false" name="username" placeholder="用户名" ng-model="data.username" id="username" class="form-control" required>
        <div class="alert alert-danger help-block" >
          用户名长度不能小于5位
        </div>
        <div class="alert alert-danger help-block" >
          用户名长度不能大于15位
        </div>
      </div>
    </div>
  </form>
 </div>

复制代码 代码如下:

AngularJS 能够创设多少个单一页面应用程序。

2、表单验证常见难点及指令

<<input type=”text” required />  

AngularJS 学习起来特别简单。

1)、问题:
》如何绑定数据——双向绑定
》验证表单——正则表明式
》展现错误消息
》整个Form的验证
》制止提交没通过验证的表单
》防止频仍交付
2)、常用命令
》指令:
ng-model,ng-required,ng-pattern,ng-maxlength,ng-minlength,ng-change
》样式:
ng-valid,ng-invalid,ng-pristine,ng-dirty
》form调节变量
formName.inputFieldName.$error:字段错误音信
formName.inputFieldName.$dirty:字段是或不是修改
formName.inputFieldName.$pristine:字段是不是是伊始状态
formName.inputFieldName.$valid:字段是不是行得通
formName.inputFieldName.$invalid:字段是还是不是低效

2. 小小的长度

一、AngularJS指令与表明式

二、功用完毕

表达表单输入的文本长度是还是不是超过有个别最小值,在输入字段上接纳指令ng-minleng=
“{number}”:

【AngularJS常用命令】

2.1 用户名验证
用户输入用户名字段验证首要是长度验证,以及是还是不是必须

复制代码 代码如下:

1、ng-app:证明Angular所管辖的区域,一般写在body或HTML上,原则上一个页面唯有叁个。

1、ng-model绑定表单数据,以便利用angular的验证api
2、ng-minlength,ng-maxlength规定字段长段,required规定字段必填
3、错误提醒音信通过formName.input菲尔德Name.$error.minlength/maxlength决定是不是要展示,当输入违规时,$error对应的不当音信会为true
如下:

<<input type=”text” ng-minlength=”5″ />

2、ng-model:把元素值(比方输入域的值)绑定到应用程序的变量中。

  <div class="form-group">
    <label for="username" class="col-sm-3 control-label">用户名</label>
    <div class="col-sm-9">
      <input type="text" autocomplete="false" name="username" placeholder="用户名" ng-model="data.username" id="username" ng-minlength="5" ng-maxlength="15" class="form-control" required>
      <div class="alert alert-danger help-block" ng-show="myForm.username.$error.minlength">
        用户名长度不能小于5位
      </div>
      <div class="alert alert-danger help-block" ng-show="myForm.username.$error.maxlength">
        用户名长度不能大于15位
      </div>
    </div>
  </div>

3. 最大尺寸

eg:<input type=”text” ng-model=”name”/>

2.2 密码确认验证

表达表单输入的文书长度是或不是低于或等于某些最大值,在输入字段上使用指令ng-maxlength=”{number}”:

3、ng-bind:把应用程序变量中的数据绑定到HTML视图中,可用表达式替代。

用户密码确认验证必要保障三次输入的密码一致,且在未输入确认密码前不说明

复制代码 代码如下:

eg:<div id=”div1″ ng-bind=”name”>
</div>等效于<div id=”div1″ >{{name}}</div>

1、绑定数据ng-model=data.pwdConfirm(全部表单数据都保存到data对象中)
2、通过判别data.pwdConfirm!==data.password鲜明一遍密码是不是输入一致
3、通过formName.input菲尔德.$dirty鲜明此项是还是不是填写过

<<input type=”text” ng-maxlength=”20″ />

4、ng-init:开首化 AngularJS应用程序变量。

  <div class="form-group">
    <label class="col-sm-3 control-label">确认密码</label>
    <div class="col-sm-9">
      <input type="password" name="pwdConfirm" ng-model="data.pwdConfirm" placeholder="确认密码" id="pwdConfirm" required class="form-control">
      <div class="alert alert-danger" ng-show="data.pwdConfirm!==data.password&&myForm.pwd.$dirty">
        两次输入的密码不一致
      </div>
    </div>
  </div>

4. 格局相配

eg:<body data-ng-app=”” ng-init=”name=123″>

2.3 邮箱验证

使用ng-pattern=”/PATTE奥迪Q7N/”来保管道输送入能够包容钦定的正则表明式:

5、表明式:{{}}绑定表明式,能够涵盖文字,运算符和变量。

邮箱验证首要表明邮箱格式是不是准确,字段长度

复制代码 代码如下:

可是表明式在网页加载瞬间会看到{{}},所以能够用ng-bind=””代替。

1、使用H5中新增type属性值email作为
2、通过ng-pattern指令定义邮箱验证的正则
3、邮箱验证常用正则表明式:^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+
4、通过myForm.email.$error.pattern验证邮箱格式是还是不是科学

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

eg:{{ 5 + “” + 5 + ‘,Angular’ }}

  <div class="form-group">
    <label class="col-sm-3 control-label">邮箱</label>
    <div class="col-sm-9">
      <input type="email" name="email" ng-model="data.email" placeholder="邮箱" class="form-control" required ng-pattern="/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/">
      <div class="alert alert-danger help-block" ng-show="myForm.email.$error.minlength">
        邮箱长度不能小于5位
      </div>
      <div class="alert alert-danger help-block" ng-show="myForm.email.$error.pattern">
        请填写正确的邮箱格式
      </div>
      <div class="alert alert-danger help-block" ng-show="myForm.email.$error.maxlength">
        邮箱长度不能大于30位
      </div>
    </div>
  </div>

5. 电子邮件

【基本概念】

2.4 单复选框

表达输入内容是不是是电子邮件,只要像上边那样将input的品种设置为email就能够:

命令:AngularJS中,通过增添HTML的属性提供功能。

单复选框主要规定数据绑定难点,以及复选框的数额渲染
1、通过以data对象的质量格局来绑定数据
2、多选的选项值通过ng-repeat进行遍历
3、设置value值以便提交时对值进行区分

复制代码 代码如下:

就此,ng-开始的新属性,被大家改为指令。

  <div class="form-group">
    <label class="col-sm-3 control-label">性别</label>
     <div class="col-sm-9">
       <label class="radio-inline">
         <input type="radio" name="sex" value="1" ng-model="data.sex" />男
       </label>
       <label class="radio-inline">
         <input type="radio" name="sex" value="0" ng-model="data.sex" />女
       </label>
     </div>
  </div>
   <div class="form-group">
    <label class="col-sm-3 control-label">爱好</label>
     <div class="col-sm-9">
       <label class="radio-inline" ng-repeat="hobby in hobbies">
         <input type="checkbox" name="hobby" ng-model="hobbiesC" value="{{hobby.id}}" /> {{hobby.name}}
       </label>
     </div>
  </div>
  <div class="col-sm-9 col-sm-offset-3">
    <input type="reset" class=" btn btn-danger" value="重置">
    <input type="submit" class="btn btn-primary " value="提交">
  </div>

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

二、AngularJS中的MVC中的效率域

2.5 城市二级联合浮动

6. 数字

【MVC三层架构】

1、城市数目定义:每一种城市指标包罗id,parent,name属性,id为各样城市省份独有,parent是依靠父级省份或城市而定
2、通过ng-options指令来遍历出城市数目

注明输入内容是不是是数字,将input的花色设置为number:

1、model(模型):

2.5.1 城市数据模型

复制代码 代码如下:

应用程序中用来拍卖数据的某个。(保存或修改数据到数据库、变量等)。AngularJS中的Model特指的是:数据。

通过\$scope.cities定义数据模型

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

View(视图):用户看到的用于展现数据的页面。

   $scope.cities=[
    {
      id:1,
      parent:0,
      name:'四川省'
    },
    {
      id:2,
      parent:1,
      name:'成都市'
    },
    ...
  ]

7. URL

Controller(调节器):应用程序中管理用户交互的片段。担任从视图读取数据,调整用户输入,并向模型发送数据。

2.5.2 html中渲染城市数目

 验证输入内容是不是是U途达L,将input的门类设置为 url:

2、专门的学业规律:

透过ng-options指令和ng-model指令遍历数据和安装暗中同意值

4858美高梅 ,复制代码 代码如下:

用户从视图层发出乞求,controller接收到央浼后转发给对应的model管理,model处理完毕后回去结果给controller,并在View层反馈给用户.

  <div class="form-group">
    <label class="col-sm-3 control-label">出生地</label>
     <div class="col-sm-3">
       <select name="birthAddress" id="" ng-model="data.province" ng-options="c.id as c.name for c in cities">
         <option value="">-- 请选择 --</option>
       </select>
     </div>
  </div>

<<input type=”url” name=”homepage” ng-model=”user.facebook_url”
/> 

3、成立多少个Angular模块,即ng-app所绑定的有个别 ,需传递五个参数:

说明:
1、ng-options=”obj.name for obj in datas” 常见用法,通过 obj.id as
obj.name设置option标签的value值为id,内容为name
2、ng-model可用以安装select的默许值
2.5.3 定义过滤器用于过滤省份,城市等

下边大家将那几个表单验证放到具体的贯彻中来测试一下:

①模块称号:即ng-app所供给绑定的名称,ng-app=”myApp”

.filter("cityFilter",function(){
  return function(input,parent){
    var filtedData=[];
    angular.forEach(input,function(value,key){
      if(value.parent===parent){
        filtedData.push(value)
      }
    })
    return filtedData;
  }
})
<div class="col-md-6">
 <form role="form" class="form-horizontal">
  <div class="form-group">
  <div class="col-md-4">
   <label for="name">1.必填项</label>
  </div>
  <div class="col-md-8">
   <input class="form-control" id="name" type="text" required ng-model='user.name' />
  </div>
  </div>
  <div class="form-group">
  <div class="col-md-4">
   <label for="minlength">2.最小长度=5</label>
  </div>
  <div class="col-md-8">
   <input type="text" id="minlength" ng-minlength="5" ng-model="user.minlength" class="form-control" />
  </div>
  </div>
  <div class="form-group">
  <div class="col-md-4">
   <label for="minlength">3.最大长度=20</label>
          </div>
  <div class="col-md-8">
   <input type="text" ng-model="user.maxlength" ng-maxlength="20" class="form-control" />
  </div>
  </div>
  <div class="form-group">
  <div class="col-md-4">
   <label for="minlength">4. 模式匹配</label>
  </div>
  <div class="col-md-8">
   <input type="text" id="minlength" ng-model="user.pattern" ng-pattern="/^[a-zA-Z]*\d$/" class="form-control" />
  </div>
  </div>
  <div class="form-group">
  <div class="col-md-4">
   <label for="email">5. 电子邮件</label>
          </div>
  <div class="col-md-8">
   <input type="email" id="email" name="email" ng-model="user.email" class="form-control" />
  </div>
  </div>
  <div class="form-group">
  <div class="col-md-4">
   <label for="age">6. 数字</label>
          </div>
  <div class="col-md-8">
   <input type="number" id="age" name="age" ng-model="user.age" class="form-control" />
  </div>
  </div>
  <div class="form-group">
  <div class="col-md-4">
   <label for="url"> 7. URL</label>
          </div>
  <div class="col-md-8">
   <input type="url" id="url" name="homepage" ng-model="user.url" class="form-control" />
  </div>
  </div>
  <div class="form-group text-center">
  <input class="btn btn-primary btn-lg" type="submit" value="提交" />
  </div>
 </form> 
 </div>
 <div class="col-md-12">
 1.必填项:{{user.name}}<br>
 2.最小长度=5:{{user.minlength}}<br>
 3.最大长度=20:{{user.maxlength}}<br>
 4.模式匹配:{{user.pattern}}<br>
 5.电子邮件:{{user.email}}<br>
 6.数字:{{user.age}}<br>
 7.URL:{{user.url}}<br>
 </div>

②数组:需求注入的模块名称,没有需求可为空。

说明:
1、如上经过定义cityFilter,传入三个parent作为参数,遍历传入的数据,并宽判别是不是与传播的parent相等来分明当前城市是哪一级
2、重临的filtedData正是过滤结果。
3、用到了angular.forEach(obj,fn)迭代器,在那之中fn有多少个参数字传送入,分别是value,key,obj;value即为近期遍历出的对象,key为遍历的独步一时标志,obj为被遍历的数组或对象自己。
使用(省份): ng-options=”c.id as c.name
for c in cities|cityFilter:0″

在测试中大家发掘,唯有当说明式满足验证,才会实时举行双向绑定。同一时候大家也发掘,效果图如下:

eg:var app= angular.module(“myApp”,[]);

2)、城市相应选拔
1、依照data.province作为过滤参数,实行城市筛选
2、区域的挑三拣四同理,可安装当选取了都会后,再冒出区域选项框(ng-show指令)

4858美高梅 1

在Angular模块上,成立一个调节器Controller,供给传递七个参数。

  <div class="col-sm-2">
    <select name="birthC" ng-model="data.cities" ng-options="c.id as c.name for c in cities|cityFilter:data.province">
      <option value="">-- 请选择 --</option>
    </select>
  </div>
  <div class="col-sm-2" ng-show="!myForm.birthC.$pristine">
    <select name="birthD" ng-model="data.district" ng-options="c.id as c.name for c in cities|cityFilter:data.cities">
      <option value="">-- 请选择 --</option>
    </select>
  </div>

似乎并未发生怎么着难点,不过假诺大家将其移植到一个队HTML5验证不怎么好的浏览器再来测试一下【本例IE9】,问题来了,某个字段完全没得验证

①Controller名称,即ng-controller须要绑定的名目。ng-controller=”myCtrl”

2.6 表单提交

4858美高梅 2

②Controllerd的构造函数:构造函数能够流传几个参数,包涵$scope/$rootScope以及各样系统内置对象;

1、成效必要:当表单验证不通过时,使提交按键失效(ng-disabled),

实则,下边包车型客车事例,我们采纳了HTML5的验证与ng自有的验证实行了咬合,不接济HTML5表明,但ng自由验证运维非凡。化解方案很轻巧,能够运用格局相称的艺术消除那二种情形,也得以自定义表达指令来复写可能重定义验证规则。

【AngularJS中的成效域】

html结构:

遮掩浏览器对表单的暗中同意验证行为 在表单成分上助长novalidate标识就可以,难题是大家怎么知道我们的表单有啥样字段是立见成效的,那么些事非法恐怕无效的?ng对此也提供了丰硕棒的消除方案,表单的习性能够在其所属的$scope对象中访问到,而大家又能够访问$scope对象,由此JavaScript能够直接地访问DOM中的表单属性。借助那一个属性,我们可以对表单做出实时响应。

①$scope:局地成效域,申明在$scope上的品质和办法,只好在此时此刻的Controller中动用

  <div class="col-sm-9 col-sm-offset-3">
    <input type="reset" class=" btn btn-danger" value="重置" ng-click="reset()">
    <input type="submit" class="btn btn-primary " value="提交" ng-disabled="myForm.$invalid">
  </div>

能够使用formName.inputFieldName.property的格式访问那个属性。

②$rootScope:根功用域,注脚在$rootScope上的习性和章程,

js:

未修改过的表单

能够在ng-app所包罗的别的区域选用(无论是还是不是同Controller,或是还是不是在Controller蕴含范围中)

  $scope.reset=function(){
    $scope.myForm.$setPristine();
  }

布尔值属性,表示用户是不是修改了表单。即使为ture,表示平素不退换过;false表示修改过formName.inputFieldName.$pristine;

>>>若未有利用$scope表明变量,而直白在HTML中采取ng-model绑定的变量功用域为:

注:表单中有三个$setPristine()方法将表单复位原始状态,class,$dirty,$pristine会苏醒原有状态。但注意表单的错误音信$error并不会被埋伏,所以在证实表单时,记得在各样错误音讯都以由$dirty才看清的。

修改的表单

1、假设ng-model在有些ng-controller中,则此变量会暗中认可绑定到当前Controller的$scope上;

上述就是本文的全体内容,希望对我们的学习抱有援救,也可望大家多多协理脚本之家。

布尔型属性,当且仅当用户实际已经修改的表单。不管表单是不是因此认证:formName.inputFieldName.$dirty 

2、假若ng-model未有在任何一个ng-controller中,此变量会绑定到$rootScope上。

你也许感兴趣的小说:

  • AngularJS使用ngMessages进行表单验证
  • AngularJS中贯彻用户访问的身份认证和表单验证作用
  • 详解AngularJS中的表单验证(推荐)
  • AngularJS手动表单验证
  • 详见解读AngularJS中的表单验证编制程序
  • AngularJS落成的获得关节及失去主旨时的表单验证成效示例
  • 强有力的 Angular
    表单验证功效详细介绍
  • AngularJS
    表单验证手提式有线电话机号的实例(非必填)
  • Angular4表单验证代码详解
  • Angular2.js兑现表单验证详解
  • AngularJS自定义表单验证功用实例详解

经过证实的表单

三、AngularJS过滤器

布尔型属性,它提示表单是不是通过认证。如若表单当前经过认证,他将为true:formName.inputFieldName.$valid

AngularJS中,过滤器能够行使二个管道字符(|)增多到表明式和下令中。

未通过验证的表单:formName.inputFieldName.$invalid 

>>>系统内置过滤器:

最终五个属性在用于DOM成分的来得或隐藏时是特地有效的。同不平日间,借使要设置一定的class时,他们也非常管用的。

currency:格式化数字为货币格式。
filter:从数组项中选择两个子集。
lowercase:格式化字符串为小写。
orderBy:根据有个别表明式排列数组。
uppercase:格式化字符串为大写。

错误
那是AngularJS提供的其它二个可怜管用的品质:$error对象。它包括当前表单的有着验证内容,以及它们是还是不是合法的音讯。用下边包车型地铁语法访问那天性情

eg:

formName.inputfieldName.$error
一经表明战败,那特性子的值为true;若是值为false,表明输入字段的值通过了验证。

<p>{{“aBcDeF”|uppercase}}</p>
<p>{{“aBcDeF”|lowercase}}</p>
<p>{{123456|currency}}</p>

上边大家对这一个验证指令展开测试:

【自定义过滤器】

<!DOCTYPE html>

<html ng-app="myTest">
 <head>
 <meta name="viewport" content="width=device-width" />
 <title>Index</title>
 <link href="~/Content/css/bootstrap.min.css" rel="stylesheet" />
 <script src="~/Javascript/angular.min.js"> </script>
 <style type="text/css">
  body { padding-top: 30px; }
 </style>
 </head>
 <body ng-Controller="MyController">
 <div class="col-md-6">
  <form role="form" name="myForm" ng-submit="submitForm(myForm.$valid)" class="form-horizontal" novalidate>
  <div class="form-group has-feedback">
   <div class="col-md-4">
   <label for="name">1.必填项</label>
   </div>
   <div class="col-md-8">
   <input class="form-control" id="name" name="name" type="text" required ng-model='user.name' />

   </div>
  </div>
  <div class="form-group has-feedback">
   <div class="col-md-4">
   <label for="minlength">2.最小长度=5</label>
   </div>
   <div class="col-md-8">
   <input type="text" id="minlength" name="minlength" ng-minlength="5" ng-model="user.minlength" class="form-control" />

   </div>
  </div>
  <div class="form-group has-feedback">
   <div class="col-md-4">
   <label for="maxlength">3.最大长度=20</label>
   </div>
   <div class="col-md-8">
   <input type="text" id="maxlength" name="maxlength" ng-model="user.maxlength" ng-maxlength="20" class="form-control" />

   </div>
  </div>
  <div class="form-group has-feedback">
   <div class="col-md-4">
   <label for="pattern">4. 模式匹配</label>
   </div>
   <div class="col-md-8">
   <input type="text" id="pattern" name="pattern" ng-model="user.pattern" ng-pattern="/^[a-zA-Z]*\d$/" class="form-control" />

   </div>
  </div>
  <div class="form-group has-feedback">
   <div class="col-md-4">
   <label for="email">5. 电子邮件</label>
   </div>
   <div class="col-md-8">
   <input type="email" id="email" name="email" ng-model="user.email" class="form-control" />

   </div>
  </div>
  <div class="form-group has-feedback">
   <div class="col-md-4">
   <label for="age">6. 数字</label>
   </div>
   <div class="col-md-8">
   <input type="number" id="age" name="age" ng-model="user.age" class="form-control" />


   </div>
  </div>
  <div class="form-group has-feedback">
   <div class="col-md-4">
   <label for="url"> 7. URL</label>
   </div>
   <div class="col-md-8">
   <input type="url" id="url" name="url" ng-model="user.url" class="form-control" />

   </div>
  </div>
  <div class="form-group text-center">
   <input class="btn btn-primary btn-lg" ng-disabled="myForm.$invalid" type="submit" value="提交" />
  </div>
  </form> 
 </div>
 <div class="col-md-12">
  1.必填项:{{user.name}}  
  $pristine 【没修改】:{{myForm.name.$pristine }}  
  $dirty【修改过】:{{myForm.name.$dirty}}  
  $invalid【验证失败】:{{myForm.name.$invalid}}  
  $invalid【验证成功】:{{myForm.name.$valid}}  
  required:{{myForm.name.$error.required}}  
  <br>
  2.最小长度=5:{{user.minlength}}
  $pristine 【没修改】:{{myForm.minlength.$pristine }}  
  $dirty【修改过】:{{myForm.minlength.$dirty}}  
  $invalid【验证失败】:{{myForm.minlength.$invalid}}  
  $invalid【验证成功】:{{myForm.minlength.$valid}}  
  $error【错误详情】:{{myForm.minlength.$error}}  <br>
  3.最大长度=20:{{user.maxlength}}
  $pristine 【没修改】:{{myForm.maxlength.$pristine }}  
  $dirty【修改过】:{{myForm.maxlength.$dirty}}  
  $invalid【验证失败】:{{myForm.maxlength.$invalid}}  
  $invalid【验证成功】:{{myForm.maxlength.$valid}}  
  $error【错误详情】:{{myForm.maxlength.$error}}  <br>
  4.模式匹配:{{user.pattern}}
  $pristine 【没修改】:{{myForm.pattern.$pristine }}  
  $dirty【修改过】:{{myForm.pattern.$dirty}}  
  $invalid【验证失败】:{{myForm.pattern.$invalid}}  
  $invalid【验证成功】:{{myForm.pattern.$valid}}  
  $error【错误详情】:{{myForm.pattern.$error}}  <br>
  5.电子邮件:{{user.email}}
  $pristine 【没修改】:{{myForm.email.$pristine }}  
  $dirty【修改过】:{{myForm.email.$dirty}}  
  $invalid【验证失败】:{{myForm.email.$invalid}}  
  $invalid【验证成功】:{{myForm.email.$valid}}  
  $error【错误详情】:{{myForm.email.$error}}  <br>
  6.数字:{{user.age}}
  $pristine 【没修改】:{{myForm.age.$pristine }}  
  $dirty【修改过】:{{myForm.age.$dirty}}  
  $invalid【验证失败】:{{myForm.age.$invalid}}  
  $invalid【验证成功】:{{myForm.age.$valid}}  
  $error【错误详情】:{{myForm.age.$error}}  <br>
  7.URL:{{user.url}}
  $pristine 【没修改】:{{myForm.url.$pristine }}  
  $dirty【修改过】:{{myForm.url.$dirty}}  
  $invalid【验证失败】:{{myForm.url.$invalid}}  
  $invalid【验证成功】:{{myForm.url.$valid}}  
  $error【错误详情】:{{myForm.url.$error}}  <br>
 </div>
 </body>
</html>
<script type="text/javascript">
 angular.module('myTest', [])
 .controller('myController', function($scope) {
  $scope.submitForm = function(isValid) {
  if (!isValid) {
   alert('验证失败');
  }
  };
 }
 );
</script>
.filter('reverse',function(){ //可以注入依赖
return function(text){
if(!angular.isString(text)){
return "您输入的不是字符串!"
}else{
return text.split("").reverse().join("");
}
}
})

意义如下:

四、AngularJS中的 http && select &&
DOM操作

4858美高梅 3

一、AngularJS中的http

而且,ng针对那二种注脚指令,针对性的设置了有的css样式

$http 是 AngularJS 中的三个主干服务,用于读取远程服务器的数码。

它们包涵:

二、AngularJS中的select

.ng-valid  { }
.ng-invalid { }
.ng-pristine { }
.ng-dirty  { }
/* really specific css rules applied by angular */
.ng-invalid-required  { }
.ng-invalid-minlength  { }
.ng-valid-max-length  { }

①选择数组作为数据源,当中,x表示数组的每一种。

它们对应着表单输入字段的一定情景。
比如说当有个别字段中的输入违法时,.ng-invlid类会被加多到那些字段上。
你能够编写自身喜欢的CSS . 你能够私有定制化这个类来促成特定的场景应用.

私下认可会将x直接绑定到option的value中,而option展现的内容,由后边的x
for…决定。

不过,私下认可的印证指令不自然可以,完全满意我们的真实性应用场景,ng一样提供的自定义验证指令的作用。

eg:
<section ng-model= “name” ng-options=”x.site for x in
sites”></section>

首先大家来看二个简易的事例:

②运用对象作为数据源,当中,(x,y)表示键值对,x为键,y为值。

angular.module("myTest", [])
 .directive('multipleEmail', [function () {
 return {
  require: "ngModel",
  link: function (scope, element, attr, ngModel) {
  if (ngModel) {
   var emailsRegexp = /^([a-z0-9!#$%&'*+\/=?^_`{|}~.-]+@[a-z0-9-]+(\.[a-z0-9-]+)*[;;]?)+$/i;
  }
  var customValidator = function (value) {
   var validity = ngModel.$isEmpty(value) || emailsRegexp.test(value);
   ngModel.$setValidity("multipleEmail", validity);
   return validity ? value : undefined;
  };
  ngModel.$formatters.push(customValidator);
  ngModel.$parsers.push(customValidator);
  }
 };
 }])

默许会将值y绑定到option的value中,而option突显的剧情,由前边的x
for…决定。

页面Html部分代码如下:

eg:
<section ng-model= “name” ng-options=”x for (x,y) in
sites”></section>

 <form class="form-horizontal" role="form" id="custom_form" name="custom_form" novalidate>
  <div class="form-group">
  <label class="col-sm-2 control-label">多个email</label>

  <div class="col-sm-10">
   <input multiple-email name="user_email" ng-model="user.email" required class="form-control" placeholder="自定义验证,多个邮箱地址,以“;”或者“;”分割" />
   验证通过:{{custom_form.user_email.$valid}}
  </div>
  </div>
  <div class="form-group text-center">
  <input class="btn btn-primary btn-lg" ng-disabled="custom_form.$invalid" type="submit" value="提交" />
  </div>
 </form>

三、AngularJS中的DOM操作

代码非常的粗略,达成的功效如下所示:

①ng-disabled=”true/false”

4858美高梅 4

当传入true时,控件禁止使用。传入false时,启用。

这段代码很轻巧,不过关乎到了ngModelController的多少个第一的性格
$viewValue

<label>
<input type=”checkbox” ng-model=”mySwitch”>是或不是同意
小希真萌!
</label>
<button ng-disabled=”!mySwitch” class=”btn
btn-primary”>点我!</button>
<p></p>

$viewValue属性保存着革新视图所需的莫过于字符串。

②ng-show

$modelValue

暗中同意隐藏 传入true时来得
<label>
<input type=”checkbox” ng-model=”mySwitch1″>是否
显示?
</label>
<button ng-show=”mySwitch1″ class=”btn
btn-primary”>点我!</button>
<p></p>

$modelValue由数据模型持有。$modelValue和$viewValue恐怕是见仁见智的,取决于$parser流水生产线是还是不是对其进展了操作。

③ng-hide

$parsers

默许突显 传入true是隐藏
<label>
<input type=”checkbox” ng-model=”mySwitch2″>是不是隐身?
</label>
<button ng-hide=”mySwitch2″ class=”btn
btn-primary”>点我!</button>
<p></p>

$parsers的值是二个由函数组成的数组,当用户同调整器进行互相,并且ngModelController中的$setViewValue()方法被调用时,个中的函数在当用户同调整器进行互动,并且ngModelController中的$setViewValue()方法被调会以流水生产线的格局被依次调用。ngModel从DOM中读取的值会被传出$parsers中的函数,并逐项被内部的分析器管理。那是为了对值实行拍卖和修饰。

④ng-click

备注:ngModel.$setViewValue()函数用于安装效能域中的视图值。

概念了AngularJS中的点击事件。
只可以触发绑定在Angular成效域中的属性与艺术。
<button ng-click=”count = count + 1″>点我!</button>
<p>{{ count }}</p>
<button ng-click=”func()”>说一下感想呢!</button>

ngModel.$set ViewValue()函数能够承受多个参数。

DOM操作附录:

value(字符串):value参数是大家想要赋值给ngModel实例的实际值。

eg:

本条情势会更新调整器上本土的$viewValue,然后将值传递给每叁个$parser函数(包蕴验证器)。当班值日被分析,且$parser流水生产线中颇具的函数都调用完结后,值会被赋给$modelValue属性,并且传递给指令中ng-model属性提供的表明式。最后,全体手续都完成后,$viewChangeListeners中具备的监听器都会被调用。注意,单独调用$setViewValue()不会挑起一个新的digest循环,因而一旦想翻新指令,须求在设置$viewValue后手动触发digest。$setViewValue()方法适合于在自定义指令中监听自定义事件(比方选择具备回调函数的jQuery插件),大家会愿意在回调时设置$viewValue并实行digest循环。

先导入JS文件angular.js!!!

$formatters

<script src="libs/angular.js"></script>

$formatters的值是多个由函数组成的数组,个中的函数会以流水生产线的样式在数据模型的值产生变化时被各个调用。它和$parser流水生产线互不影响,用来对值进行格式化和改动,以便在绑定了那么些值的控件中显得。

JS代码:

 $viewChangeListeners

angular.module("app",[])
.controller("ctrl",function($scope,$rootScope){
$scope.count = 10;
$scope.func = function(){
alert("小希真萌!");
}
})

$viewChangeListeners的值是三个由函数组成的数组,在那之中的函数会以流水生产线的样式在视图中的值发生变化时被每一种调用。通过$viewChangeListeners,能够在无需利用$watch的气象下促成类似的一言一动。由于重返值会被忽视,因而这几个函数不要求再次来到值。

五、AngularJS中的表单验证

 $error

1、表单山东中国广播公司大的辨证操作:

$error目的中保留着未有通过验证的验证器名称以及相应的错误消息。

$dirty:表单有填写记录
$valid:字段内容合法的
$invalid:字段内容是地下的
$pristine:表单未有填写记录
$error:表单验证不经过的错误新闻

 $pristine

2、验证时需给表单及供给验证的input,设置name属性;

$pristine的值是布尔型的,能够告知我们用户是还是不是对控件实行了修改。

给form及input设置name后,会将form表单音讯,暗许绑定到$scope效能域中,故可以动用formName.inputName.$验证操作
拿到评释结果;

 $dirty

eg:

$dirty的值和$pristine相反,能够告诉大家用户是不是和控件进行过互动。

formName.inputName.$dirty=”true” 表单被填写过
formName.inputName.$invalid=”true” 表单输入违规
formName.inputName.$error.required=”true” 表单必填但未填
$error协理的表达有:required/minlength/maxlength/pattern/email/number/data
/url等……

$valid

3、为防止冲突,举例利用type=”email”时,H5也会实行验证操作。

$valid值能够告知我们近期的控件中是或不是有不当。当有不当时值为false,未有不当时值为true。

设若只想使用AngularJS验证,能够使用<form
novalidate></form>属性,禁止使用H5自带验证功能。

$invalid

六、AngularJS中的动画

$invalid值能够告诉大家当前控件中是不是留存至少贰个谬误,它的值和$valid相反。

AngularJS中利用动画 :

上述正是本文的全部内容,希望对大家完毕AngularJS表单验证有所帮忙。

提供了动画片效果,能够相称 CSS使用。

你恐怕感兴趣的文章:

  • AngularJS达成表单验证
  • AngularJS使用ngMessages举办表单验证
  • angular达成表单验证及提交功能
  • AngularJS中落到实处用户访问的地位申明和表单验证成效
  • AngularJS使用angular-formly举行表单验证
  • 详尽解读AngularJS中的表单验证编制程序
  • AngularJS手动表单验证
  • Angular表单验证实例详解
  • AngularJS自动表单验证
  • Angular落成表单验证功用

1、AngularJS 使用动画片要求引进angular-animate.js库!

2、假若页面中并未有自定义的模块(ng-app),能够直接绑定系统模块ng-app=”ngAnimate”;

借使页面中已有自定义模块,能够在自定义模块后注入”ngAnimate”模块。
eg:angular.module(“app”,[“ngAnimate”])

3、当调用相关指令调节成分显示隐藏时,会自行抬高对应的class类;

ng-show/ng-hide 会移除/添加ng-hide
ng-if/ng-switch/ng-repeat等其他指令,必要各自安装显示后和隐身后的class样式;
显示后:.ng-enter-active,.ng-leave{}
隐藏后:.ng-enter,.ng-leave-active{}

七、AngularJS中的路由

1、载入了贯彻路由的 js 文件:angular-route.js。

2、包涵了 ngRoute 模块作为主应用模块的注重模块。

eg:angular.module(“app”,[“ngRoute”])

3.将要超链接改为路有格式:

eg:<a href=”#/page1″ rel=”external nofollow” >page1</a>

4.在config中,注入$routeProvider,进行路由配置:

$routeProvider
.when(‘/’,{template:’这是首页页面’})
.when(‘/page1′,{template:’这是page1页面’})
.when(‘/page2′,{template:’这是page2页面’})
.when(‘/page3′,{template:’这是page3页面’})
.otherwise({redirectTo:’/’});
})

5、在页面包车型地铁确切岗位,加多ng-view,用于承载张开的页面
<div ng-view></div> <ng-view></ng-view>

【路由参数对象中可选属性】

1.tempalte:自定的HTML模板,会加载在ng-view中
2.tempalteUrl:导入外界的HTML模板,为了制止冲突外界的HTML只需求保留body内部的代码就可以;
3.redirectTo:重定向于有个别页面,一般用于.otherwise()中;
4.controller:在当模板上实行的controller函数,生成新的scope

以上那篇AngularJS实用基础知识_入门必备篇(推荐)便是作者分享给大家的全体内容了,希望能给大家三个参照他事他说加以考查,也目的在于大家多多协助脚本之家。

您恐怕感兴趣的文章:

  • 详解使用angularjs的ng-options时怎样设置暗中同意值(开始值)
  • 运用AngularJS对表单提交内容张开表达的操作方法
  • AngularJS达成select的ng-options成效示例
  • 详细AngularJs4的图样剪裁组件的实例
  • AngularJS常见过滤器用法实例总结
  • 详解angularJS自定义指令间的并行交互
  • AngularJS使用ocLazyLoad完成js延迟加载
  • AngularJS中利用three.js的实例详解

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有