如何使用 Vue-SweetAlert2 在一个弹出窗口中验证多个用户输入

Question

作为编码培训，现在我正在制作一个网页，您可以在其中单击一个 "Create" 按钮，这会触发一个弹出窗口，您应该在其中填写 6 个数据输入，其输入样式像文本、select 等变化。（请参阅下面的代码和附图）

<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>

从技术上讲，它正在运行。单击 "create" 按钮时会出现弹出窗口，您可以填写所有 6 个空格并单击 "OK" 按钮。但我想添加一些功能来检查用户输入是否有效，我的意思是

地址应在 50 个字符以内
名字应在 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}`)
}

，但本例只涉及"one input"。另外，这里检查的只是 "whether an IP address has been given or not" (，这意味着是否有值，并没有真正检查 IP 地址的长度是否正确和/或输入字符串是否由数字组成/字母）。

另一方面，我想做的是“限制多个输入值（例如字符串等）”“在单个弹出窗口中”。知道我应该怎么做吗？

Answer 1

不幸的是，HTML 限制输入的标签（例如 required、pattern 等）不起作用（参见 issues），所以我找到了两个解决方法。

使用 preConfirm 作为链接问题

您可以使用 preConfirm 和 if/else 语句以及 Regex 来检查您的要求，如果它们不满足您可以使用 Swal.showValidationMessage(error)。

 const{value:formValue} = await Swal.fire({
      title: "Some multiple input",
      html: 
        <input id="swal-input1" class="swal-input1" placeholder="name"> +
        <input id="swal-input2" class="swal-input2" placeholder="phone">,
      preConfirm: () => {
        if($("#swal-input1").val() !== "Joe"){
          Swal.showValidationMessage("your name must be Joe");
        } else if (!('[0-9]+'.test($("#swal-input2").val())){
          Swal.showValidationMessage("your phone must contain some numbers");    
        }
      }
});

使用Bootstrap

这样 Bootstrap 在验证时进行检查，您需要在输入 class 中包含 class="form-control" 并稍微更改 html 代码。

如果某些条件失败，浏览器会按照每个字段在 html 代码中的顺序显示验证消息。

 const {value: formValue} = await Swal.fire({
        title: 'Some multiple inputs',
        html:
            '<form id="multiple-inputs">' +
                '<div class="form-group">' + 
                    '<input type="text" class="form-control swal-input1" id="swal-input1" min=2 max=4 required>' +
                '</div>' +
                '<div class="form-group">' + 
                    '<input type="text" class="form-control swal-input2" id="swal-input2" placeholder="Name" pattern="[A-Za-z]" required>' +
                '</div>' +
            '</form>', 
});

我已经尝试了这两种解决方案，实际上只适用于 Bootstrap3，但它应该也适用于最新版本。

如何使用 Vue-SweetAlert2 在一个弹出窗口中验证多个用户输入

How to validate multiple user inputs within just one popup using Vue-SweetAlert2

vue.js

vue-sweetalert2