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 相关文章推荐
网页设计常用的一些技巧
Dec 22 Javascript
通用JS事件写法实现代码
Jan 07 Javascript
jq实现酷炫的鼠标经过图片翻滚效果
Mar 12 Javascript
Vue实现路由跳转和嵌套
Jun 20 Javascript
ReactNative实现图片上传功能的示例代码
Jul 11 Javascript
JavaScript编写的网页小游戏,很给力
Aug 18 Javascript
vue和react等项目中更简单的实现展开收起更多等效果示例
Feb 22 Javascript
vue实现前台列表数据过滤搜索、分页效果
May 28 Javascript
js中offset,client , scroll 三大元素知识点总结
Sep 11 Javascript
Java Varargs 可变参数用法详解
Jan 28 Javascript
详解vue v-model
Aug 31 Javascript
vue中使用router全局守卫实现页面拦截的示例
Oct 23 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
大师制作的中短波矿石收音机
2020/04/02 无线电
Discuz Uchome ajaxpost小技巧
2011/01/04 PHP
用PHP代码给图片加水印
2015/07/01 PHP
PHP解压ZIP文件到指定文件夹的方法
2016/11/17 PHP
Laravel框架自定义验证过程实例分析
2019/02/01 PHP
laravel 使用事件系统统计浏览量的实现
2019/10/16 PHP
JQUERY操作JSON实例代码
2010/02/09 Javascript
js变换显示图片的实例
2013/04/16 Javascript
js固定DIV高度,超出部分自动添加滚动条的简单方法
2013/07/10 Javascript
js编码、解码函数介绍及其使用示例
2013/09/05 Javascript
浅谈JavaScript中的String对象常用方法
2015/02/25 Javascript
Jquery全选与反选点击执行一次的解决方案
2015/08/14 Javascript
javascript简单实现等比例缩小图片的方法
2016/07/27 Javascript
基于jquery二维码生成插件qrcode
2017/01/07 Javascript
很棒的vue弹窗组件
2017/05/24 Javascript
开发Vue树形组件的示例代码
2017/12/21 Javascript
angular4+百分比进度显示插件用法示例
2019/05/05 Javascript
vant 自定义 van-dropdown-item的用法
2020/08/05 Javascript
[46:55]LGD vs Liquid 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
python中base64加密解密方法实例分析
2015/05/16 Python
python魔法方法-属性访问控制详解
2016/07/25 Python
Django中的Signal代码详解
2018/02/05 Python
在PyCharm下使用 ipython 交互式编程的方法
2019/01/17 Python
Python3实现飞机大战游戏
2020/04/24 Python
Django 解决阿里云部署同步数据库报错的问题
2020/05/14 Python
Lookfantastic俄罗斯:欧洲在线化妆品零售商
2019/08/06 全球购物
《放飞蜻蜓》教学反思
2014/04/27 职场文书
公司任命书模板
2014/06/06 职场文书
企业安全生产责任书范本
2014/07/28 职场文书
2015年团支部工作总结
2015/04/03 职场文书
解除处分决定书
2015/06/25 职场文书
合理化建议书范文
2015/09/14 职场文书
《水上飞机》教学反思
2016/02/20 职场文书
Python数据处理的三个实用技巧分享
2022/04/01 Python
MySQL三种方式实现递归查询
2022/04/18 MySQL
如何通过cmd 连接阿里云服务器
2022/04/18 Servers