Alert controller 輸入框驗證

Question

如何在 Ionic 2 或 3 中驗證和顯示警報 Controller 中的輸入錯誤

let prompt = Alert.create({
      title: 'Alert input validation',
      message: "How can I validate below input field?",
      inputs: [ 
        {
          name: 'email',
          placeholder: 'email'
        },
      ],
      buttons: [
        {
          text: 'Save',
          handler: data => {
                        let validateObj = this.validateEmail(data);
                        if (!validateObj.isValid) {
                            alert(validateObj.message);
                            return false;
                        } else {
                            //make HTTP call
                        }
                    }
        }
      ]
    });

有人已經更新了 alertcontroller 並為 Ionic 團隊提出了拉取請求。 我認為 Ionic 團隊計划在未來實現這一點。 https://github.com/ionic-team/ionic/pull/12541

對於此驗證功能，我需要一些解決方法。

plnkr http://plnkr.co/edit/IBonfBJngky0h8UtMwMD?p=preview

感謝你的幫助。

Answer 1

目前這個功能還沒有實現。你可以看到這個 Git 問題。

我在這里使用了Toast通知，但我沒有收到客戶的任何投訴 :)

這是我所做的。

警報框的done處理程序：

{
          text: 'Done',
          handler: (data) => {
            if (EmailValidator.isValid(data.email)) {
              if (this.data) {
                //my code
              } else {
                //my code
              }
              return true;
            } else {
              this.showErrorToast('Invalid Email');
              return false;
            }
          }
        }

吐司方法是這樣的：

showErrorToast(data: any) {
    let toast = this.toastCtrl.create({
      message: data,
      duration: 3000,
      position: 'top'
    });

    toast.onDidDismiss(() => {
      console.log('Dismissed toast');
    });

    toast.present();
  }

用戶界面

Answer 2

我確實通過使用 setMessage 方法找到了解決方法。 最初消息將為空，當用戶沒有輸入任何值時，驗證消息將在點擊時填寫。 找到下面的代碼片段

let prompt = Alert.create({
  title: 'Alert input validation',
  message: '',
  inputs: [ 
    {
      name: 'email',
      placeholder: 'email'
    },
  ],
  buttons: [
    {
      text: 'Save',
      handler: data => {
                    let validateObj = this.validateEmail(data);
                    if (!validateObj.isValid) {
                        prompt.setMessage('Your validation message');
                        return false;
                    } else {
                        //make HTTP call
                    }
                }
    }
  ]
});

您可以在 variable.scss 文件中覆蓋消息的字體，如下所示

$alert-md-message-text-color:red;

Answer 3

使用 toast 的解決方案是完全有效的，但從 UX 的角度來看，我發現它把用戶的注意力分散了太多，以至於無法通過 toast 來發送通知和消息表單錯誤。

相反，我喜歡將驗證附加到警報的 DOM 中。 此示例是一個具有單個輸入的簡單警報，但可以使用一些 util 方法輕松擴展以創建驗證樣板。 我還在一個快速的stackblitz 中創建了這個例子。 在我的例子中，我已經在整個應用程序中包含了一個驗證錯誤標記的變體，所以樣式已經是全局的，我只需要引入標記來設置它的樣式。

const alert = await this.alertController.create({
  header: 'Example Header',
  subHeader: 'Example Subheader',
  message: 'Lorem ipsum dolor sit amet consectetur adipisicing elit.',
  backdropDismiss: false,
  cssClass: 'example-alert',
  inputs: [
    {
      type: 'text',
      name: 'mobilePhone',
      label: 'Mobile Phone',
      placeholder: 'Mobile phone (10 digits)',
      attributes: {
        maxlength: 10
      }
    }
  ],
  buttons: [
    {
      text: 'Ok',
      handler: (formData: { mobilePhone: string }) => {
        if (formData.mobilePhone && PhoneValidator.isValid(formData.mobilePhone)) 
          return formData;
        } else {
          // Only if no validation has been inserted into the DOM
          if (!alert.getElementsByClassName('validation-errors').length) {
            const input = alert.getElementsByTagName('input')[0];

            const validationErrors = document.createElement('div');
            validationErrors.className = 'validation-errors';

            const errorMessage = document.createElement('small');
            errorMessage.classList.add('error-message');
            errorMessage.textContent = 'Invalid phone number';

            validationErrors.appendChild(errorMessage);

            input.insertAdjacentElement('afterend', validationErrors);
          }

          return false;
        }
      }
    }
  ]
});

await alert.present();

.validation-errors {
  padding-top: 5px;
  text-align: left;

  .error-message {
    color: var(--ion-color-danger);
    font-size: 12px;
  }
}

// Example of markup:
//<div class="validation-errors">
//  <small class="error-message"></small>
//</div>

Answer 4

您可以使用 REGX 驗證電子郵件。

這是示例。 只需用您的功能替換此功能即可。

validateEmail(data) {
    if( /(.+)@(.+){2,}\.(.+){2,}/.test(data.email) ){
      return {
        isValid: true,
        message: ''
      };
    } else {
       return {
          isValid: false,
          message: 'Email address is required'
       }
    }
}

我希望這會幫助某人。

Answer 5

為此，我想出了一個偷偷摸摸的解決方法。 如果您希望input字段在輸入不正確時搖動（振動）或在下方顯示錯誤。 你可以試一試。

我在 Ionic 6 上對此進行了測試，但我不確定早期版本（請隨時嘗試更新此答案）

本質上， alertController返回一個Ion element ，您可以使用querySelector定位inputs並添加您的 styles 並使用動畫快捷方式。

@ionic/(vue/角度/反應)

import { alertController } from '@ionic/(vue/angular/react)'

const showAlert = async () => {
  const alert = await alertController.create({
    header: 'Personal details',
    backdropDismiss: false,
    buttons: [
      {
        text: 'Save',
        handler: (data) => {
          // Do you fields validation here
          let isEmailInvalid = !data.email

          shakeInputs(alert, 'email', isEmailInvalid)
  
          if (isEmailInvalid) {
            return false
          }
        }
      }
    ],
    inputs: [
      {
        name: 'email',
        placeholder: 'email'
      }
    ]
  })
}

function shakeInputs(alert, placeholder, isInvalid) {
  const input = alert.querySelector(`.alert-wrapper .alert-input-wrapper input[placeholder="${placeholder}"]`)
  if (input) {
    if (isInvalid) {
      input.classList.add('custom-input-error')

      const shake = [
        { offset: 0, transform: 'translateX(0)' },
        { offset: 0.25, transform: 'translateX(5px)' },
        { offset: 0.5, transform: 'translateX(-5px)' },
        { offset: 0.75, transform: 'translateX(5px)' },
        { offset: 1, transform: 'translateX(0)' }
      ]

      input.animate(shake, { duration: 200, iterations: 1 })
    } else {
      input.classList.remove('custom-input-error')
    }
  }
}

<style>
  .custom-input-error {
    border: 2px solid red;

    &::placeholder {
      --ion-placeholder-color: red;
    }
  }
</style>