Как проверить несколько пользовательских входов в одном всплывающем окне, используя Vue-SweetAlert2 - PullRequest
Новая
       8

Как проверить несколько пользовательских входов в одном всплывающем окне, используя Vue-SweetAlert2

0 голосов
/ 02 июля 2019

Как тренинг по кодированию, сейчас я делаю веб-страницу, где вы можете нажать кнопку «Создать», которая вызывает всплывающее окно, где вы должны заполнить 6 вводов данных, стиль ввода которых изменяется как текст, выберите и т. д. (см. код и прикрепленное изображение ниже) 

<template>
      <v-btn class="create-button" color="yellow" @click="alertDisplay">Create</v-btn>

    <br/>

    <p>Test result of createCustomer: {{ createdCustomer }}</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        createdCustomer: null
      }
    },
    methods: {
      alertDisplay() {
        const {value: formValues} = await this.$swal.fire({
            title: 'Create private customer',
            html: '<input id="swal-input1" class="swal2-input" placeholder="Customer Number">' +
                '<select id="swal-input2" class="swal2-input"> <option value="fi_FI">fi_FI</option> <option value="sv_SE">sv_SE</option> </select>'
                 + 
                '<input id="swal-input3" class="swal2-input" placeholder="regNo">' +
                '<input id="swal-input4" class="swal2-input" placeholder="Address">' +
                '<input id="swal-input5" class="swal2-input" placeholder="First Name">' +
                '<input id="swal-input6" class="swal2-input" placeholder="Last Name">'
                ,
            focusConfirm: false,
            preConfirm: () => {
                return [
                    document.getElementById('swal-input1').value,
                    document.getElementById('swal-input2').value,
                    document.getElementById('swal-input3').value,
                    document.getElementById('swal-input4').value,
                    document.getElementById('swal-input5').value,
                    document.getElementById('swal-input6').value
                ]
            }
        })
        if (formValues) {
            this.createdCustomer = this.$swal.fire(JSON.stringify(formValues));
            console.log(this.createdCustomer);
        }   
      }
    }
  }
</script>

multiple inputs

Технически, это работает. Всплывающее окно появляется при нажатии кнопки «Создать», и вы можете заполнить все 6 пробелов и нажать кнопку «ОК». Но я хочу добавить некоторые функции, которые проверяют правильность введенных пользователем данных, я имею в виду такие вещи, как

  • адрес должен быть в пределах 50 символов
  • firstName должно быть в пределах 20 символов
  • customerNumber должен включать как алфавиты, так и цифры

и так далее.

Если бы это был C или Java, я мог бы сделать что-то вроде 

if(length <= 50){
    // proceed
} else {
    // warn the user that the string is too long
}

, но когда дело доходит до проверки нескольких входов в одном всплывающем окне с помощью Vue-SweetAlert2, я не уверен, как это сделать, и мне не удалось найти ни одной страницы, которая объясняет достаточно подробно.

Если бы это был всего лишь один вход, возможно, вы могли бы использовать inputValidor вот так 

const {value: ipAddress} = await Swal.fire({
    title: 'Enter an IP address',
    input: 'text',
    inputValue: inputValue,
    showCancelButton: true,
    inputValidator: (value) => {
        if (!value) {
            return 'You need to write something!'
        }
    }
})

if (ipAddress) {
  Swal.fire(`Your IP address is ${ipAddress}`)
}

, но этот пример включает только «один вход». Кроме того, это проверяет только то, был ли задан IP-адрес или нет (это означает, есть ли значение или нет, и он на самом деле не проверяет правильность длины IP-адреса и / или строка ввода состоит из цифр / алфавитов).

С другой стороны, я пытаюсь " ограничить несколько входных значений (например, длина строки и т. Д.)" " в пределах одного всплывающего окна ". Есть идеи, как мне это сделать?

...