ionic3确认密码验证

我现在在做的项目是由前一个同事完成的，他也工作没多久，似乎没有重用的意识，我收拾一些遗留问题和改产品和线上线下真是巨痛苦，由于同事嫌麻烦，ionic版注册根本没做，直接导向到电脑版了，这次我要封装app，注册就轮到我来实现了

才接触ionic没多久，这次要做个注册功能，对ionic3的表单和验证知之甚少，只好一个个从表单布局开始找例子，折腾了几个小时，界面算是完成

验证部分也是磕磕绊绊，用户名，邮箱，密码用自带的Validators搞定了，到了验证重复密码出了问题，自带的没有，网上一搜，倒是有教程，是扩展自定义指令的，匆匆一看，好像有点长啊，怪不得同事说麻烦

我自己其实也是不想麻烦，在适当的地方偷懒才是好程序员的，心里想了想，这个重复密码验证目前只会用到一次，以后最多是修改密码改功能多一次，再加上目前时间不是很宽松，就干脆自己用别的简单方法解决

思考和调试一番之后算是得到了似乎还可以的结果，过程略去，我就直接上代码吧

ts文件

首先要导入FormBuilder,Validators,FormGroup

import {FormBuilder,Validators,FormGroup} from "@angular/forms";

在class里写上

    RegisterForm: FormGroup;
    name: any;
    email:any;
    password: any;
    repassword:any;
    constructor(public navCtrl: NavController, private formBuilder: FormBuilder) {
        this.RegisterForm = formBuilder.group({
            name: ['', Validators.compose([Validators.required])],
            email:['',Validators.compose([Validators.required,Validators.email])],
            password: ['', Validators.compose([Validators.required, Validators.minLength(6)])],
            repassword:['',Validators.compose([Validators.required,Validators.minLength(6)])]
        })
        this.name = this.RegisterForm.controls['name'];
        this.email=this.RegisterForm.controls['email'];
        this.password = this.RegisterForm.controls['password'];
        this.repassword=this.RegisterForm.controls['repassword']
    }

我想我的命名是比较清晰的，注释应该就不用写了

相应的html

<ion-header>
  <ion-navbar color="primary">
    <ion-title>注册</ion-title>
  </ion-navbar>
</ion-header>
<ion-content padding>
    <form [formGroup]="RegisterForm" (ngSubmit)="Register(RegisterForm.value)" novalidate>
        <ion-input type="text" placeholder="用户名" value="" [formControl]="name" clearInput=true maxlength="15"></ion-input>
        <div *ngIf="name.hasError('required') && name.touched"   class="error-message" color="danger">请输入用户名</div>
        <ion-input type="text" placeholder="邮箱" value="" [formControl]="email" clearInput=true maxlength="60"></ion-input>
        <div *ngIf="email.hasError('required') && email.touched" class="error-message" color="danger">请输入邮箱</div>
        <div *ngIf="!email.hasError('required')&&email.hasError('email') && email.touched" class="error-message" color="danger">邮箱格式不正确</div>
        <ion-input type="password" placeholder="密码" value="" [formControl]="password" clearInput=true></ion-input>
        <div *ngIf="password.hasError('required') && password.touched"  color="danger" class="error-message">请输入密码</div>
        <div *ngIf="(password.hasError('minlength')) && password.touched"  color="danger" class="error-message">密码长度最少为六位</div>
        <ion-input type="password" placeholder="确认密码" value="" [formControl]="repassword" clearInput=true></ion-input>
        <div *ngIf="repassword.hasError('required') && repassword.touched" color="danger" class="error-message">请输入确认密码</div>
        <div *ngIf="(repassword.hasError('minlength')) && repassword.touched" color="danger" class="error-message">确认密码长度最少为六位</div>
        <!--密码不一致的判断要在必填和位数判断后面，也就是它们两个都没有错误时，再去判断密码是否一样-->
        <div *ngIf="!repassword.hasError('required')&&!repassword.hasError('minlength')&&password.value!=repassword.value" color="danger" class="error-message">两次输入的密码不一致</div>
        <!--注册按钮原本只有!RegisterForm.valid，但由于密码不一致不是自带的，还要在这里单独加判断-->
        <button ion-button block color="danger" type="submit" [disabled]="!RegisterForm.valid||(password.value!=repassword.value)">确认注册</button>
    </form>
</ion-content>

测试了下，似乎没问题，问题算是解决了，而且写起来比自定义指令是要简单不少的，这里只涉及验证，提交的就不写了

ionic3确认密码验证

猜你喜欢