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 相关文章推荐
javascript让setInteval里的函数参数中的this指向特定的对象
Jan 31 Javascript
获取数组中最大最小值方法js代码(自写)
Aug 12 Javascript
JavaScript实现简单图片滚动附源码下载
Jun 17 Javascript
JavaScript中对DOM节点的访问、创建、修改、删除
Nov 16 Javascript
JS函数多个参数默认值指定方法分析
Nov 28 Javascript
探索Javascript中this的奥秘
Dec 11 Javascript
Node.js查找当前目录下文件夹实例代码
Mar 07 Javascript
webpack 1.x升级过程中的踩坑总结大全
Aug 09 Javascript
用Webpack构建Vue项目的实践
Nov 07 Javascript
element-ui表格合并span-method的实现方法
May 21 Javascript
koa2 用户注册、登录校验与加盐加密的实现方法
Jul 22 Javascript
Vue触发隐藏input file的方法实例详解
Aug 14 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
如何限制访问者的ip(PHPBB的代码)
2006/10/09 PHP
PHP中的CMS的涵义
2007/03/11 PHP
PHP中的array数组类型分析说明
2010/07/27 PHP
PHP缩略图等比例无损压缩,可填充空白区域补充色
2011/06/10 PHP
PHP中多维数组的foreach遍历示例
2014/06/13 PHP
PHP文件及文件夹操作之创建、删除、移动、复制
2016/07/13 PHP
php调用云片网接口发送短信的实现方法
2017/10/25 PHP
javascript 密码强弱度检测万能插件
2009/02/25 Javascript
不安全的常用的js写法
2009/09/15 Javascript
Javascript 面向对象之重载
2010/05/04 Javascript
JS仿百度搜索自动提示框匹配查询功能
2013/11/21 Javascript
JavaScript字符串对象split方法入门实例(用于把字符串分割成数组)
2014/10/16 Javascript
jQuery实现手机自定义弹出输入框
2016/06/13 Javascript
window.open打开窗口被拦截的快速解决方法
2016/08/04 Javascript
JavaScript计算值然后把值嵌入到html中的实现方法
2016/10/29 Javascript
详细讲解vue2+vuex+axios
2017/05/27 Javascript
js使用ajax传值给后台,后台返回字符串处理方法
2018/08/08 Javascript
使用Vue做一个简单的todo应用的三种方式的示例代码
2018/10/20 Javascript
ES6新增的数组知识实例小结
2020/05/23 Javascript
pycharm 使用心得(六)进行简单的数据库管理
2014/06/06 Python
Python基于pygame实现的弹力球效果(附源码)
2015/11/11 Python
Go语言基于Socket编写服务器端与客户端通信的实例
2016/02/19 Python
Python使用sftp实现上传和下载功能(实例代码)
2017/03/14 Python
Python使用Tkinter实现机器人走迷宫
2018/01/22 Python
tensorflow创建变量以及根据名称查找变量
2018/03/10 Python
Python私有属性私有方法应用实例解析
2020/09/15 Python
python 基于selenium实现鼠标拖拽功能
2020/12/24 Python
css3 clip实现圆环进度条的示例代码
2018/02/07 HTML / CSS
Java里面有没有全局变量?为什么?
2015/02/06 面试题
会计与审计专业大专生求职信
2013/10/03 职场文书
旅游项目开发策划书
2014/01/18 职场文书
服装创业计划书范文
2014/02/05 职场文书
模范家庭事迹材料
2014/02/10 职场文书
计算机学生的自我评价分享
2014/02/18 职场文书
课前一分钟演讲稿
2014/08/26 职场文书
志愿者事迹材料
2014/12/26 职场文书