-
应用
这是一开始写出来的界面
<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'],