MUI表单（form)总结，dialog，提交

• 如何引用

  https://dev.dcloud.net.cn/mui/getting-started/官网说的很详细了

• 应用

  这是一开始写出来的界面

  
              
  请输入您的信息
  
              
  
                  姓名
                  
              
  
              
  
                  学号
                  
              
  
              
  
                  联系方式
                  
              
  
              
              
  
                  确认提交
              
  
          

   

• 实现功能

  • 会提示有无没有输入的信息

  • 真正的提交在“无误啦”这个按钮上

  • 由于要做的是领卡的界面，所以在信息提交成功后会弹出来一个带有图片的弹窗，显示领到了编号为多少的卡，由于mui的alert不好加图片，在这里我使用了layer的弹窗

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

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

    下载之后我直接解压到了文件根目录下

    本地引用，简单粗暴

    关于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 = "   "; //图片路径，这里我用到的是本地图片
                        //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()不能缺少，少了就提交不了，而第一行后边就不能加，加了提交数据就提交不了，这个我还没有搞清楚是怎么回事，希望有大佬说明一下。

  • 对于上边的trim()我突然有了一点点想法，我觉得它可能规定对于输入的字符前后的空白字符必须进行删除（？）。

  • 提交按钮我用的方法是mui.on()，我给了整个表单一个id，如下

    .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，我把其中的内容换成了刚刚完成的表单，试着提交了一下，真的可以，简直美滋滋。效果图是这样的

                
      
 

  
? 这里就敲了一些注意事项

  
? 菜鸡一个，仍在学习

  
? 希望各位大佬能够不吝赐教

 

 
 
 
 

  

   输入信息
  

 

 
 
 

  
   
请输入您的信息

   

    姓名
    
   

   

    学号
    
   

   

    联系方式
    
   

    
   

    确认提交
   

  
  
 

写在最后：本人菜鸡一个，还在学习，可能写的还有很多需要完善的地方，希望大家多多批评指正:D