Sweetalert2多输入验证

Question

我试图在多个modals中有多个表单，正如我所读到的，我必须在队列中使用swal.mixin，所有这些表单都有多个输入。

我已经这样做了，但无法找到一种方法来验证所有这些表单，任何建议？

这是我的密码：

    swal.mixin({
    confirmButtonText: 'Siguiente',
    buttonsStyling: false,
  }).queue([
    {
      html: 
        "<form class='formulario' action='' method='post'>" +

          "<div class='fila'>"+
            "<img src='src/images/svg/icons/person.svg' class='imagen'/>"+
            "<input id='name' class='espacio-datos' name='nombre' type='text' placeholder='Nombre' maxlength='20' required>" +
          "</div>"+

          "<div class='fila'>"+
            "<img src='src/images/svg/icons/id.svg' class='imagen'/>"+
            "<input id='ced' class='espacio-datos' name='num_ident' type='text' placeholder='Cedula' onkeypress='onlyNumbers(event)'>" +
          "</div>"+

          "<div class='fila'>"+
            "<img src='src/images/svg/icons/phone.svg' class='imagen'/>"+
            "<input id='tlf' class='espacio-datos' name='num_telef' type='text' placeholder='Telefono' onkeypress='onlyNumbers(event)'>" +
          "</div>"+
        "</form>",
      preConfirm: function () {        
        var array = {
          'nombre' : $("#name").val(),
          'cedula' : $("#ced").val(),
          'telefono' : $("#tlf").val(),
        }

        return array;
      },
    },
    {
      html:
        "<form action='' method='post'>" + 
          "<div class='main-cont'>"+
            "<span>" +
              "Por favor ingresa el codigo de verificacion NUIP "+
              "que hemos enviado a tu celular" +
            "</span>"+

            "<div class='row cuadros'>" +
              "<input id='num-1' class='inp-num' data-pos='0' type='text' maxlength='1' name='one' onkeypress='isInputNumber(event)' autofocus='autofocus'/>" +
              "<input id='num-2' class='inp-num' data-pos='1' type='text' maxlength='1' name='two' onkeypress='isInputNumber(event)'>" +
              "<input id='num-3' class='inp-num' data-pos='2' type='text' maxlength='1' name='three' onkeypress='isInputNumber(event)'>" +
              "<input id='num-4' class='inp-num' data-pos='3' type='text' maxlength='1' name='four' onkeypress='isInputNumber(event)'>" +
            "</div>" +
          "</div>"+
        "</form>",

      preConfirm: function () {
        return [
          $("#num-1").val(),
          $("#num-2").val(),
          $("#num-3").val(),
          $("#num-4").val(),
        ];
      },
    }

Answer 1

在sweetalert2上，如果模型没有定义任何input，则不会调用inputValidator函数。

在您的情况下，解决这个问题的一种方法是将input添加到混合器中，然后使用onBeforeOpen隐藏它。

基本上，混合蛋白变成：

 swal.mixin({
    confirmButtonText: 'Siguiente',
    buttonsStyling: false,
    input: 'text'
  })

然后将以下代码添加到队列数组中的每个元素中，以隐藏输入文本：

  onBeforeOpen: function (dom) {
    swal.getInput().style.display = 'none';
  }

您可以在以下代码中看到该实现：https://codepen.io/anon/pen/xQxWMN

Answer 2

我同时有两个。我想提取数字和复选框输入。但我没有得到任何具体的答案关于它的释放。经过大量的研究，我开发了自己的版本，你可能会觉得有用。

​

Swal.fire({
        title              : "Ball Adding",
        html               :
          '<input class="swal2-input" id="rating-number" placeholder="Qo`shiladigan ballni yozing" type="number" style=" width: 80%; ">' +
          '<label for="rating-checkbox" class="swal2-checkbox" style="display: flex;">' +
          '<input type="checkbox" value="1" id="rating-checkbox">' +
          '<span class="swal2-label">Chempionat baliga ham qo`shilsin</span>' +
          '</label>',
        showCancelButton   : true,
        confirmButtonText  : "Qo'shish",
        cancelButtonText   : 'Bekor qilish',
        showLoaderOnConfirm: true,
        preConfirm         : () => {
          console.log('Rating: '+ parseInt(document.getElementById('rating-number').value))
          console.log('Checkbox: '+document.getElementById('rating-checkbox').checked)
          return parseInt(document.getElementById('rating-number').value)
        },
        allowOutsideClick  : () => !Swal.isLoading()
      }).then((result) => {
        if (result.isConfirmed) {
         console.log(result.value+' rating add')
        }
      })

<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>

​

我在Nuxtjs中为一个项目编写了一个函数，以更新用户评分。此函数的代码.

ratingAdd() {
      Swal.fire({
        title              : "Ball qo'shish",
        html               :
          '<input class="swal2-input" id="rating-number" placeholder="Qo`shiladigan ballni yozing" type="number" style=" width: 80%; ">' +
          '<label for="rating-checkbox" class="swal2-checkbox" style="display: flex;">' +
          '<input type="checkbox" value="1" id="rating-checkbox">' +
          '<span class="swal2-label">Chempionat baliga ham qo`shilsin</span>' +
          '</label>',
        showCancelButton   : true,
        confirmButtonText  : "Qo'shish",
        cancelButtonText   : 'Bekor qilish',
        showLoaderOnConfirm: true,
        preConfirm         : () => {
          return this.$axios.post('user/rating-change-aaa', {
            user_id : parseInt(this.user_id),
            rating  : parseInt(document.getElementById('rating-number').value),
            checkbox: document.getElementById('rating-checkbox').checked
          });
        },
        allowOutsideClick  : () => !Swal.isLoading()
      }).then((result) => {
        if (result.isConfirmed) {
          this.SwalMixin(result.value.data.data.message, 'success')
          this.getUserInfo()
        }
      });
    },