angular - 如何在 ionic 3 中的模板驱动表单中添加验证?
问题描述
如何在 ionic 3 中验证手机号码,这里我使用了 ng 模型,是否有任何示例可以完成?
<ion-list>
<ion-item margin-bottom>
<ion-input type="number" id="phone" name="phone" [(ngModel)]="data.phone" #username="ngModel" placeholder="Mobile"></ion-input>
</ion-item>
<ion-item margin-bottom>
<ion-input type="password" id="password" name="password" [(ngModel)]="data.password" placeholder="*Password"></ion-input>
</ion-item>
<div style="text-align:center;">
<button ion-button color="primary" type="submit" (click)="login()">
<ion-icon ios="ios-log-in" md="md-log-in"></ion-icon>
Login</button>
</div>
</ion-list>
解决方案
.html 文件代码
<ion-list>
<ion-item margin-bottom>
<ion-input type="number" id="phone" name="phone" [(ngModel)]="data.phone" #username="ngModel" placeholder="Mobile" (ionChange)='validateForm()'></ion-input>
<br/>
{{phoneErrorMessage}}
</ion-item>
<ion-item margin-bottom>
<ion-input type="email" id="email" name="email" [(ngModel)]="data.email" placeholder="*Password" (ionChange)='validateForm()'></ion-input>
<br/>
{{emailErrorMessage}}
</ion-item>
<div style="text-align:center;">
<button ion-button color="primary" type="submit" (click)="login()">
<ion-icon ios="ios-log-in" md="md-log-in"></ion-icon>Login
</button>
</div>
</ion-list>
.ts 文件代码
public phoneErrorMessage = '';
public emailErrorMessage = '';
public data = {email:'',phone:''}
validateForm(){
var phoneValidationFlag = false ;
var emailValidationFlag = false ;
if (this.data.phone == "") {
this.phoneErrorMessage = "Name must be filled out";
phoneValidationFlag = false ;
}else{
this.phoneErrorMessage = '';
phoneValidationFlag = true;
}
var emailRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
if (!emailRegex.test(this.data.email)){
this.emailErrorMessage = 'Please enter valid email';
emailValidationFlag = false
}else{
this.emailErrorMessage = '';
emailValidationFlag = true;
}
return (emailValidationFlag && phoneValidationFlag) ? true : false ;
}
login(){
if(this.validateForm()){
//everything validated and you can excute your api call in this if section
}
}
推荐阅读
- google-cloud-platform - 在 Google Cloud Build 中运行 Cypress
- python - 如何在两个数据帧之间的 np.where 中避免 NaN?
- c# - C# 反射,Reflection.TargetException,当调用 ToString(IFormatProvider)
- r - sort() 工作正常,但使用它来显示完整的排序数据框会给出不同的输出,而不是排序后的输出
- vba - 从 Access VBA 查询 Outlook 全局地址列表
- ios - 为 iOS 构建 OpenCV 静态库
- java - 从Java中的另一个类静态实例化泛型父类的子类
- javascript - 如何使用 jQuery 为数组中的每个元素插入额外的 JS 脚本?
- javascript - 是否有事件以角度检测模板元素上的类属性更改?
- html - BEM 命名约定:我走对了吗?