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 相关文章推荐
一行代码告别document.getElementById
Jun 01 Javascript
JS中for循序中延迟加载动态效果的具体实现
Aug 18 Javascript
js动态添加事件并可传参数示例代码
Oct 21 Javascript
JavaScript获取图片的原始尺寸以宽度为例
May 04 Javascript
js动态修改整个页面样式达到换肤效果
May 23 Javascript
js实现跟随鼠标移动且带关闭功能的图片广告实例
Feb 26 Javascript
JS实现网页表格自动变大缩小的方法
Mar 09 Javascript
Bootstrap滚动监听(Scrollspy)插件详解
Apr 26 Javascript
Javascript 制作图形验证码实例详解
Dec 22 Javascript
JS异步文件分片断点上传的实现思路
Dec 25 Javascript
基于JQuery的Ajax方法使用详解
Aug 16 jQuery
JS实现网站楼层导航效果代码实例
Jun 16 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
建立动态的WML站点(一)
2006/10/09 PHP
解析php中如何直接执行SHELL
2013/06/28 PHP
PHP第三方登录―QQ登录实现方法
2017/02/06 PHP
Laravel中七个非常有用但很少人知道的Carbon方法
2017/09/21 PHP
CL vs ForZe BO5 第二场 2.13
2021/03/10 DOTA
jQuery的学习步骤
2011/02/23 Javascript
jquery删除指定的html标签并保留标签内文本内容的方法
2014/04/02 Javascript
javaScript使用EL表达式的几种方式
2014/05/27 Javascript
jQuery实现当前页面标签高亮显示的方法
2015/03/10 Javascript
页面内容排序插件jSort使用方法
2015/10/10 Javascript
JS实现鼠标滑过链接改变网页背景颜色的方法
2015/10/20 Javascript
Angularjs cookie 操作实例详解
2017/09/27 Javascript
JavaScript模块详解
2017/12/18 Javascript
写给新手同学的vuex快速上手指北小结
2020/04/14 Javascript
Vue使用axios引起的后台session不同操作
2020/08/14 Javascript
vue实现简单全选和反选功能
2020/09/15 Javascript
js实现简易ATM功能
2020/10/27 Javascript
python实现指定字符串补全空格的方法
2015/04/30 Python
理论讲解python多进程并发编程
2018/02/09 Python
对Python 2.7 pandas 中的read_excel详解
2018/05/04 Python
python中使用 xlwt 操作excel的常见方法与问题
2019/01/13 Python
对python中词典的values值的修改或新增KEY详解
2019/01/20 Python
python GUI库图形界面开发之PyQt5单选按钮控件QRadioButton详细使用方法与实例
2020/02/28 Python
python实现密码强度校验
2020/03/18 Python
2020新版本pycharm+anaconda+opencv+pyqt环境配置学习笔记,亲测可用
2020/03/24 Python
解决django框架model中外键不落实到数据库问题
2020/05/20 Python
Python基于数列实现购物车程序过程详解
2020/06/09 Python
通过css3动画和opacity透明度实现呼吸灯效果
2019/08/09 HTML / CSS
瑞典的玛丽小姐:Miss Mary of Sweden
2019/02/13 全球购物
英国领先的酒杯和水晶玻璃器皿制造商:Dartington Crystal
2019/06/23 全球购物
Currentbody德国站:健康与美容技术专家
2020/04/05 全球购物
学生自我鉴定范文
2013/10/04 职场文书
爱心活动计划书
2014/04/26 职场文书
电力企业职工培训心得体会
2016/01/11 职场文书
母婴行业实体、电商模式全面解析
2019/08/01 职场文书
再也不用花钱买漫画!Python爬取某漫画的脚本及源码
2021/06/09 Python