怎么在ionic中使用angularjs实现表单验证

本篇文章为大家展示了怎么在ionic中使用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;

上述内容就是怎么在ionic中使用angularjs实现表单验证，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注创新互联行业资讯频道。