ionic——限制输入框输入内容为邮箱格式

前言

  小编最近在做ionic项目的时候，在信息处理方面碰到了这么个事，邮箱输入框需要验证邮箱格式的正确性，但是官网提供的封装好的东西又不好使，于是，小编有了下面的解决办法。

    // HTML代码
    <ion-item lines="none">
      <ion-label>
        <span style="color:red">*</span>邮箱</ion-label>
      <ion-input type="email" placeholder="请输入邮箱" maxlength="30" style="text-align:right;" (ionBlur)="changeEmail(mymodel.email)"
        [(ngModel)]="mymodel.email" required></ion-input>
    </ion-item>

  // TS代码
  changeEmail(value) {
    const ischeck = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(value);
    if (!ischeck) {
      this.mymodel.email = '';
      super.showToast(this.toastCtrl, '请输入正确的邮箱格式');
    }
  }

  那实际效果是什么样的呢？效果描述：当输入内容不是邮箱格式，输入框失去焦点时触发TS方法，给出提示，并清空输入框内容，正确的邮箱格式不受限制。

总结

  一开始用的是正则表达式，但是由于小编学艺不精，所以一直不满意效果，这个用起来就舒服多了。