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

本篇文章为大家展示了怎么在ionic中使用angularjs实现表单验证，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。

需引入angular forms库，因为ionic会自动默认引入。

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

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

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

<ion-item>
<ion-inputtype="password"class="form-control"
name="password"#password="ngModel"
requiredmaxlength="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>

<buttonion-buttonblock(click)="login()">登录</button>
<ion-item>
<buttonion-buttonicon-startoutline(click)="goRegistered()">
去注册
</button>

<buttonion-buttonicon-endoutline>
忘记密码
</button>
</ion-item>
<h2class="errorMessage">{{promptMessage}}</h2>
<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>

运行效果如下：

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文件看到部分源码如下

/**
*Acontrolis`valid`whenits`status===VALID`.
*
*Inordertohavethisstatus,thecontrolmusthavepassedallits
*validationchecks.
*/
readonlyvalid:boolean;
/**
*Acontrolis`invalid`whenits`status===INVALID`.
*
*Inordertohavethisstatus,thecontrolmusthavefailed
*atleastoneofitsvalidationchecks.
*/
readonlyinvalid:boolean;

valid属性表示参数值校验后结果不通过为false，通过为true。

invalid则表示参数值校验不通过为true，通过为false。

/**
*Acontrolis`dirty`iftheuserhaschangedthevalue
*intheUI.
*
*Notethatprogrammaticchangestoacontrol'svaluewill
**not*markitdirty.
*/
readonlydirty:boolean;
/**
*Acontrolismarked`touched`oncetheuserhastriggered
*a`blur`eventonit.
*/
readonlytouched:boolean;

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