ionic使用angularjs表单验证（模板验证）

Julylovin 发布于2019-06-25 12:31 / 1054人阅读

摘要：会用指令来匹配这些具有验证功能的指令。每当表单控件中的值发生变化时，就会进行验证，并生成一个验证错误的列表对应着状态或者对应着状态。验证是否为空最大长度最小长度。则表示参数值校验不通过为，通过为。

1什么是模板验证

顾名思义模板验证就是通过一些angularjs的属性来在html标签中验证，为了往模板驱动表单中添加验证机制，你要添加一些验证属性，就像原生的 HTML 表单验证器。 Angular 会用指令来匹配这些具有验证功能的指令。每当表单控件中的值发生变化时，Angular 就会进行验证，并生成一个验证错误的列表（对应着 INVALID 状态）或者 null（对应着 VALID 状态）。

2示例

这是我写的一个小demo,这种验证方式无需写js代码全部在标签里使用angularjs的属性，其他地方也无需引入angular forms库，因为ionic会自动默认引入。



  
    
      
        

      
      ahdasidhasidashdudi

      
        
      

      
        记住密码
        
      

      
      
        

        
      
      {{promptMessage}}
      用户名必须为6到10位
      
        密码必须为6-16位

运行效果如下：

3核心属性

可以看到[(ngModel)]="user.username"作用是绑定了我们在ts文件中定义的变量。
#username="ngModel"的作用是把我们绑定的模型值命名成username，变成了一个FormControl对象，这里不必纠结下节会讲。
required 验证是否为空 maxlength="10" 最大长度 minlength="6"最小长度。这些都是我们需要验证的条件。
*ngIf="username.invalid && (username.dirty || username.touched)"
*ngIf标签等于true时将错误信息显示出来username.invalid表示验证不合法返回true，username.dirty 判断是否改变了这个参数的值，username.touched表示是否有碰过表单，作用在于，刚打开表单页面是，里面参数都是空的，但无需显示错误信息。

进入model.d.ts文件看到部分源码如下

/**
     * A control is `valid` when its `status === VALID`.
     *
     * In order to have this status, the control must have passed all its
     * validation checks.
     */
    readonly valid: boolean;
    /**
     * A control is `invalid` when its `status === INVALID`.
     *
     * In order to have this status, the control must have failed
     * at least one of its validation checks.
     */
    readonly invalid: boolean;

valid属性表示参数值校验后结果不通过为false，通过为true。
invalid则表示参数值校验不通过为true，通过为false。

 /**
     * A control is `dirty` if the user has changed the value
     * in the UI.
     *
     * Note that programmatic changes to a control"s value will
     * *not* mark it dirty.
     */
    readonly dirty: boolean;
    /**
    * A control is marked `touched` once the user has triggered
    * a `blur` event on it.
     */
    readonly touched: boolean;

dirty表示你是否没有改变过这个参数的值

混合云私有云 ionic+angularjs 验证表单表单验证表单验证代码

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/14622.html

ionic使用angularjs表单验证（模板验证）

摘要：会用指令来匹配这些具有验证功能的指令。每当表单控件中的值发生变化时，就会进行验证，并生成一个验证错误的列表对应着状态或者对应着状态。验证是否为空最大长度最小长度。则表示参数值校验不通过为，通过为。 1什么是模板验证顾名思义模板验证就是通过一些angularjs的属性来在html标签中验证，为了往模板驱动表单中添加验证机制，你要添加一些验证属性，就像原生的 HTML 表单验证器。 An...

williamwen1986 2019-08-05 15:44 评论0 收藏0
一个基于Angular+Ionic+Phonegap的混合APP实战

摘要：有二维码扫描功能，还做了类似消息可拖拽效果，上拉下拉刷新，轮播图组件。特别适合用于基于模式的移动应用程序开发。简介是一个用基于，和的，创建移动跨平台移动应用程序的快速开发平台。这个项目做得比较早，当时是基于ionic1和angular1做的。做了四个tabs的app，首页模仿携程首页，第二页主要是phonegap调用手机核心功能，第三页模仿微信和qq聊天页，第四页模仿一般手机的表单设...

孙淑建 2019-08-26 11:46 评论0 收藏0
Django ElasticSearch Ionic 打造 GIS 移动应用 —— 架构设计

摘要：采用了的软件设计模式，即模型，视图和控制器。并于年月在许可证下发布。这套框架是以比利时的吉普赛爵士吉他手来命名的。在中被普遍使用，甚至包括配置文件和数据模型。提供了一个免费且开源的移动优化，和组件库，来构建高交互性应用。基于构建和优化。搜索引擎是个好东西，GIS也是个好东西。当前还有Django和Ionic。最后效果图 showImg(http://www.phodal.com/s...

tianyu 2019-07-16 14:54 评论0 收藏0
Django ElasticSearch Ionic 打造 GIS 移动应用 —— 架构设计

摘要：采用了的软件设计模式，即模型，视图和控制器。并于年月在许可证下发布。这套框架是以比利时的吉普赛爵士吉他手来命名的。在中被普遍使用，甚至包括配置文件和数据模型。提供了一个免费且开源的移动优化，和组件库，来构建高交互性应用。基于构建和优化。搜索引擎是个好东西，GIS也是个好东西。当前还有Django和Ionic。最后效果图 showImg(http://www.phodal.com/s...

weapon 2019-08-05 18:17 评论0 收藏0
AngularJS表单验证

摘要：表单和其中的表单控件提供了验证服务，可以让用户在提交一般在点击类型为的按钮时提交表单前意识到自己有非法不符合要求，以下都将称为非法的输入。为了编写一个可靠的应用程序，服务端验证是不可或缺的。促发条件至于自定义表单验证，我会另写一篇。表单网页中用户于服务端交互数据的表单控件有input、select、textarea，而表单是将为了达到一个目的（登录、注册等）各种控件整合到一起的一个...

shenhualong 2019-08-02 15:55 评论0 收藏0