ionic使用angularjs表单验证(模板验证)


Posted in Javascript onDecember 12, 2018

1什么是模板验证

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

2示例

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

<header [title]="title"></header>

 <ion-content scroll="false">
 <!--<form>-->
  <ion-item>
  <ion-input type="text" class="form-control"
     name="username" #username="ngModel"
     required maxlength="10" minlength="6"
     placeholder="用户名"
     [(ngModel)]="user.username"
     ></ion-input>

  </ion-item>
  <p>ahdasidhasidashdudi</p>

  <ion-item>
  <ion-input type="password" class="form-control"
     name="password" #password="ngModel"
     required maxlength="16" minlength="6"
     placeholder="密码" [(ngModel)]="user.password"></ion-input>
  </ion-item>

  <ion-item>
  <ion-label>记住密码</ion-label>
  <ion-toggle [(ngModel)]="pepperoni"></ion-toggle>
  </ion-item>

  <button ion-button block (click)="login()">登录</button>
  <ion-item>
  <button ion-button icon-start outline (click)="goRegistered()">
   去注册
  </button>

  <button ion-button icon-end outline>
   忘记密码
  </button>
  </ion-item>
  <h1 class="errorMessage">{{promptMessage}}</h1>
  <span *ngIf="username.invalid && (username.dirty || username.touched)"
   class="errorMessage">用户名必须为6到10位</span>
  <span *ngIf="password.invalid && (password.dirty || password.touched)" class="errorMessage">
  密码必须为6-16位
  </span>
 <!--</form>-->


 </ion-content>

运行效果如下:

ionic使用angularjs表单验证(模板验证)

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表示你是否没有改变过这个参数的值

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于JQuery的密码强度验证代码
Mar 01 Javascript
JavaScript数组合并的多种方法
May 22 Javascript
jQuery实现手机自定义弹出输入框
Jun 13 Javascript
jQuery Ajax 上传文件处理方式介绍(推荐)
Jun 30 Javascript
AngularJS基础 ng-mouseover 指令简单示例
Aug 02 Javascript
jQuery查找节点并获取节点属性的方法
Sep 09 Javascript
bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果
Jun 12 jQuery
jQuery实现的简单无刷新评论功能示例
Nov 08 jQuery
详解html-webpack-plugin用法全解
Jan 22 Javascript
搭建vue开发环境
Jul 19 Javascript
layui的表单验证支持ajax判断用户名是否重复的实例
Sep 06 Javascript
JS实现打字游戏
Dec 17 Javascript
微信小程序自定义导航教程(兼容各种手机)
Dec 12 #Javascript
express express-session的使用小结
Dec 12 #Javascript
解决vue移动端适配问题
Dec 12 #Javascript
js中位运算的运用实例分析
Dec 11 #Javascript
js中的数组对象排序分析
Dec 11 #Javascript
详解Vue源码之数据的代理访问
Dec 11 #Javascript
浅谈Vue 性能优化之深挖数组
Dec 11 #Javascript
You might like
PHP关联数组的10个操作技巧
2013/01/21 PHP
php实现通过cookie换肤的方法
2015/07/13 PHP
php实现的单一入口应用程序实例分析
2015/09/23 PHP
Yii 2.0中场景的使用教程
2017/06/02 PHP
php实现的表单验证类完整示例
2019/08/13 PHP
Javascript小技巧之生成html元素
2014/05/15 Javascript
JS+CSS实现表格高亮的方法
2015/08/05 Javascript
基于JavaScript实现网页倒计时自动跳转代码
2015/12/28 Javascript
jquery在vue脚手架中的使用方式示例
2017/08/29 jQuery
JS组件系列之Gojs组件 前端图形化插件之利器
2017/11/29 Javascript
微信小程序自定义导航栏
2018/12/31 Javascript
jQuery实现的导航条点击后高亮显示功能示例
2019/03/04 jQuery
详解vue使用插槽分发内容slot的用法
2019/03/28 Javascript
vue项目启动出现cannot GET /服务错误的解决方法
2020/04/26 Javascript
[46:37]LGD vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
用Python实现一个简单的线程池
2015/04/07 Python
Python的for和break循环结构中使用else语句的技巧
2016/05/24 Python
django开发之settings.py中变量的全局引用详解
2017/03/29 Python
Python基于更相减损术实现求解最大公约数的方法
2018/04/04 Python
Python简单实现两个任意字符串乘积的方法示例
2018/04/12 Python
python2与python3共存问题的解决方法
2018/09/18 Python
python+selenium实现QQ邮箱自动发送功能
2019/01/23 Python
Django中Middleware中的函数详解
2019/07/18 Python
NumPy中的维度Axis详解
2019/11/26 Python
将labelme格式数据转化为标准的coco数据集格式方式
2020/02/17 Python
Python3的socket使用方法详解
2020/02/18 Python
谈谈对css属性box-sizing的了解
2017/01/04 HTML / CSS
健身场所或家用健身设备:Life Fitness
2017/11/01 全球购物
皮姆斯勒语言学习:Pimsleur Language Programs
2018/06/30 全球购物
吉列剃须刀美国官网:Gillette美国
2018/07/13 全球购物
拉夫劳伦爱尔兰官方网站:Ralph Lauren爱尔兰
2020/04/10 全球购物
英语分层教学实施方案
2014/06/15 职场文书
2014年双拥工作总结
2014/11/21 职场文书
离婚案件上诉状
2015/05/23 职场文书
Python序列化模块JSON与Pickle
2022/06/05 Python
python如何将mat文件转为png
2022/07/15 Python