SweetAlert2用法 - 輸入資料

Step by Step

by ShadowKao

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.10.3/sweetalert2.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.10.3/sweetalert2.js"></script>
<input type="button" value="click me to start" />

JavaScript

$("input:button").click(function () {

        swal.setDefaults({ 
          confirmButtonText: '下一步', 
          cancelButtonText: '取消',
          showCancelButton: true,
          animation: false,
          //↓預設只能填一個字元，否則會破版，不然就自行客製化html
          progressSteps: ['1', '2', '3'] 
        })

        let steps = [
          {
            title: '建立帳號',
            text: '請輸入帳號',
            input: 'text',
          },
          {
            title: '登入密碼', 
            text: '請輸入密碼',
            input: 'password',
          },
          {
            title: '電子信箱',
            text: '請輸入正確格式的電子信箱',
            //這會驗證格式
            input: 'email'
          }
        ];

        swal.queue(steps).then(function (result) {
         //讓animation、showCancelButton、progressSteps參數回復預設
         swal.resetDefaults();  
         
         //ES 2015的樣版字串
         let msg = `<div>帳號:${result[0]}</div>
                    <div>密碼:${result[1]}</div>  
                    <div>電子信箱:${result[2]}`;
          swal({
            title: '完成註冊!',
            html:msg,
            type:"success",
            confirmButtonText: '確定'
          });
        }, function (dismiss) {
          swal.resetDefaults();      
          if(dismiss==="cancel")
          {
           //如果使用者中途按下「取消」，要執行的事...
          
          }
                 
        });

      });