MUI表單（form)總結，dialog，提交

• 如何引用

  https://dev.dcloud.net.cn/mui/getting-started/官網說的很詳細了

• 應用

  這是一開始寫出來的界面

  

  <form class="mui-input-group" id="userform">
     <h4 >請輸入您的信息</h4>
     <div class="mui-input-row">
      <label >姓名</label>
      <input type="text" class="mui-input-clear" id="uname" name="name" placeholder="請輸入姓名" >
     </div>
     <div class="mui-input-row">
      <label >學號</label>
      <input type="text" class="mui-input-clear" id="uxuehao" name="xuehao" placeholder="請輸入學號" >
     </div>
     <div class="mui-input-row">
      <label >聯系方式</label>
      <input type="text" class="mui-input-clear" id="utel" name="tel" placeholder="請輸入電話" >
     </div>
     
     <div class="mui-button-row">
      <button type="submit" class="mui-btn mui-btn-primary" data-loading-icon="mui-spinner mui-spinner-custom" >確認提交</button>
     </div>
    </form>

   

• 實現功能

  • 會提示有無沒有輸入的信息

    

  • 真正的提交在“無誤啦”這個按鈕上

    

  • 由於要做的是領卡的界面，所以在信息提交成功后會彈出來一個帶有圖片的彈窗，顯示領到了編號為多少的卡，由於mui的alert不好加圖片，在這里我使用了layer的彈窗

    layer下載地址：http://layer.layui.com/

    jQuery下載地址：http://www.jq22.com/jquery-info122

    下載之后我直接解壓到了文件根目錄下

    本地引用，簡單粗暴

    <script type="text/javascript" src="jquery/jquery/jquery-3.5.1.js"></script>
    <script type="text/javascript" src="layer/layer/layer.js"></script>

    關於layer彈窗的具體使用，個人覺得這篇博客https://blog.csdn.net/qq_41815146/article/details/81141088可以說是很詳細了

  • 會驗證輸入的信息是否曾經輸入過，這里我利用id進行了判斷，如果返回的id是undefined，證明領取過了

  • PS:這個是和同學一起完成的，目前我只會前端部分，后端部分待我學成再添加上

js部分

mui.init();
//plusReady，用來定義加載dom后的操作
mui("#userform").on('tap','button',function(){
 //判斷輸入框是否為空
 var m = mui(".mui-input-clear");
 var check = true; 
 mui.each(m,function (index,item) {
  if(!this.value || this.value.trim() == "") {
   var label = this.previousElementSibling;
   mui.alert(label.innerText + "不允許為空");
   check = false;
   return false;
   }
 });  
 if (check) {
  var btnArray = ['無誤啦', '再看看'];
  mui.confirm('請確認無誤后再提交哦~', '信息確認', btnArray, function(e) {
   if (e.index == 0) {
    var userform = document.getElementById("userform");
    var username = document.getElementById("uname").value.trim();
    var userxuehao = document.getElementById("uxuehao").value.trim();
    var usertel = document.getElementById("utel").value.trim();
    //發起 ajax請求  
    mui.ajax('這是服務器鏈接',{
     data:{
      name:username,
      xuehao:userxuehao,
      tel:usertel
      },
     dataType:'json',//服務器返回json格式數據
     type:'post',//HTTP請求類型
     timeout:10000,//超時時間設置為10秒； 
     headers:{'Content-Type':'application/json'}, 
     
                   //提交成功后彈窗
     success:function(data){
      //console.log(data)
      var img = " <span style='text-align: center;display:block'><img src='ka.jpg'> </span> "; //圖片路徑，這里我用到的是本地圖片
      //layer
      
      //進行判斷，判斷是否領過
      if(data.id==undefined){
       mui.alert('您已領取，請勿重復領取')
      }
      else{
       layer.open({
        type: 1,//Page層類型,type=2時才能顯示在線圖片,type=1時顯示本地圖片
        area: ['260px', '230px'],
        title: '提交成功',
        shade: 0.6 ,//遮罩透明度
        maxmin: true ,//允許全屏最小化
        anim: 1 ,//0-6的動畫形式，-1不開啟
        content: "恭喜你獲得編號為"+data.id+img
        });
       }
             
      },
      
      //提交不成功的異常處理
      error:function(xhr,type,errorThrown){
        //異常處理；
       console.log(type);
      }
     });
        
    }
   })
  }
 })

• 踩坑之處:

  • 這一段代碼

  var userform = document.getElementById("userform");
  var username = document.getElementById("uname").value.trim();
  var userxuehao = document.getElementById("uxuehao").value.trim();
  var usertel = document.getElementById("utel").value.trim();

  后邊三行的.trim()不能缺少，少了就提交不了，而第一行后邊就不能加，加了提交數據就提交不了，這個我還沒有搞清楚是怎么回事，希望有大佬說明一下。

  • 提交按鈕我用的方法是mui.on()，我給了整個表單一個id，如下

    <form class="mui-input-group" id="userform">

    .on方法，mui('最外面的那一層id').on('tap','button',function(){})，因為是我自己寫的id，所以要用

    mui("#userform").on('tap','button',function(){})

    而不是像官網給出的例子那樣

    mui(".userform").on('tap','button',function(){})

     

• 美化

  這樣簡簡單單一個表單有點過於難看，於是加了個背景圖片和按鈕，想通過按鈕來跳轉到填寫信息的界面，大致樣式如下

但是一個按鈕跳轉到那樣空空的填寫表單的界面還是很難看

一開始考慮的是將按鈕加一個點擊然后彈出mui.alert()，將mui.alert()改為表單樣式，但是無論如何我只能利用mui的輸入對話框搞出一行輸入，查了很多資料也沒搞出來就放棄了

PS：倘若有哪位大佬看到這里並且恰巧會的話還希望能夠指點我這只小菜雞

再次小聲bb:寫到這里的時候才發現，沒准可以用layer的彈出框搞一個，可惜當時沒有嘗試，等我有時間了嘗試一下把這個坑填上

於是我又去翻了一下mui，發現了一個好東西

就是這個操作按鈕，能夠從底部彈出actionsheet，我把其中的內容換成了剛剛完成的表單，試着提交了一下，真的可以，簡直美滋滋。效果圖是這樣的

<body style="background-image: url(./ex.jpg);background-position: center center;
                /* 背景圖不平鋪 */
                background-repeat: no-repeat;
                /* 當內容高度大於圖片高度時，背景圖像的位置相對於viewport固定 */
                background-attachment: fixed;  /*此條屬性必須設置否則可能無效*/
                /* 讓背景圖基於容器大小伸縮 */
                background-size: cover; ">
                
      <!--文字區域-->
 <div style="margin:auto;margin-top:300px; width: 82%;">
  <h5 style="font-family: 楷體;padding: 10px; color: whitesmoke;">▸ 這里就敲了一些注意事項</h5>
  <h5 style="font-family: 楷體;padding: 10px;color: white; ">▸ 菜雞一個，仍在學習</h5>
  <h5 style="font-family: 楷體; padding: 10px;color: white;">▸ 希望各位大佬能夠不吝賜教</h5>
 </div>
 
 
 <!--按鈕部分-->
 <div class="mui-button-row">
  <p>
   <a href="#information" class="mui-btn mui-btn-royal" style="margin-top: 150px; padding: 5px 55px;font-family: 楷體; font-size: 18px;border-radius:20px;">輸入信息</a>
  </p>
 </div>
 
 <!--actionsheet中替換為表單-->
 <div id="information" class="mui-popover mui-popover-action mui-popover-bottom" style="padding: 10px;">
  <form class="mui-input-group" id="userform" style="border-radius:5px;">
   <h4 style="text-align: center; padding-top: 10px; font-family: 楷體; ">請輸入您的信息</h4>
   <div class="mui-input-row">
    <label style="font-family: 楷體;">姓名</label>
    <input type="text" class="mui-input-clear" id="uname" name="name" placeholder="請輸入姓名" style="font-family: 楷體;">
   </div>
   <div class="mui-input-row">
    <label style="font-family: 楷體;">學號</label>
    <input type="text" class="mui-input-clear" id="uxuehao" name="xuehao" placeholder="請輸入學號" style="font-family: 楷體;">
   </div>
   <div class="mui-input-row">
    <label style="font-family: 楷體;">聯系方式</label>
    <input type="text" class="mui-input-clear" id="utel" name="tel" placeholder="請輸入電話" style="font-family: 楷體;">
   </div>
    
   <div class="mui-button-row">
    <button type="submit" class="mui-btn mui-btn-primary" data-loading-icon="mui-spinner mui-spinner-custom" style="font-family: 楷體;">確認提交</button>
   </div>
  </form>
  
 </div>

寫在最后：本人菜雞一個，還在學習，可能寫的還有很多需要完善的地方，希望大家多多批評指正:D