微信小程序实现表单验证源码微信小程序实现表单验证源码

本文实例为大家分享了微信小程序实现表单验证的具体代码，供大家参考，具体内容如下
效果图

文章图片

点击预约设计弹出表单

文章图片

城市，面积不能输入，只能选择

文章图片

点击位置获取当前定位
源码:
Wxml

{{designerDetail.name}}{{designerDetail.honour}}设计费用：{{designerDetail.attr_3}}简介-作品：{{designerDetail.attr_2}}-擅长：{{designerDetail.attr_1}}-毕业院校：{{designerDetail.attr_4}}-从业年限：{{designerDetail.attr_5}}-设计理念：{{designerDetail.attr_6}}案例作品预约设计预约量房

// pages/designerList/designerDetail.js//获取应用实例const app = getApp()Page({ /*** 页面的初始数据*/data: {urlhttp: app.d.hostImg,//图片路径参数designerDetail: {},userlocation: '',//工程位置acreagelist: ["60㎡以下", "60㎡-70㎡", "70㎡-100㎡", "100㎡以上"],//面积数组userZoneList:[],//城市列表price:0,dialogHidden:true,orderType:'',//预约类型index: '',//面积下标index2: '',//城市下标btnStatus:true,designerid:'',//设计师id}, /*** 生命周期函数--监听页面加载*/onLoad: function (options) {var that = this; var id = options.id; that.setData({designerid:id,})console.log(id)wx.showNavigationBarLoading(); wx.request({url: app.d.ceshiUrl + 'home.designerDetail',data: {"id": id,},success: function (res) {console.log(res)var res = res.data; that.setData({designerDetail: res,})wx.hideNavigationBarLoading(); }})wx.request({url: app.d.ceshiUrl + 'home.getService',success: function (res) {console.log(res)var res = res.data; that.setData({userZoneList: res,})wx.hideNavigationBarLoading(); }}) //支付金额wx.request({url: app.d.ceshiUrl + 'home.calc',success: function (res) {console.log(res)var res = res.data; that.setData({price: res.price,})}})},//选择所在区域getLocation: function (e) {var that = this; wx.chooseLocation({type: 'gcj02', //返回可以用于wx.openLocation的经纬度success: function (res) {var latitude = res.latitudevar longitude = res.longitudeconsole.log(res)that.setData({userlocation: res.name,latitude: latitude,longitude: longitude,})}})},//所在城市选择bindPickerzone: function (e) {console.log('picker发送选择改变，携带值为', e.detail.value)this.setData({index2: e.detail.value})},//房屋面积选择bindPickerChange: function (e) {console.log('picker发送选择改变，携带值为', e.detail.value)this.setData({index: e.detail.value})},//图片预览bindpreviewImage: function (e){var that = this; console.log(e.currentTarget.id)var index = e.currentTarget.id; var picslist = that.data.designerDetail.pics; for (var i in picslist) {picslist[i] = that.data.urlhttp + picslist[i]; }wx.previewImage({current: picslist[index], // 当前显示图片的http链接urls: picslist // 需要预览的图片http链接列表})},orderTap: function (e) {var that = this; console.log(e)that.setData({orderType: e.target.dataset.type,dialogHidden: false,})},closeTap: function () {var that = this; that.setData({dialogHidden: true,})},formSubmit: function (e) {var that = this; console.log(e.detail); var value = https://www.it610.com/article/e.detail.value; var myreg = /^[1][3,4,5,7,8][0-9]{9}$/; //电话校验var acreage = that.data.acreagelist[that.data.index]; var userZone = that.data.userZoneList[that.data.index2]; var userlocation = that.data.userlocation; that.setData({btnStatus: false,})//所在城市if (userZone =="" || userZone == null) {wx.showModal({title: "",content: '请选择所在城市',showCancel: false,success: function (res) {if (res.confirm) {console.log('用户点击确定')}}})that.setData({btnStatus: true,})return false; }//工程位置if (userlocation == "" || userlocation == null) {wx.showModal({title: "",content: '请选择工程位置',showCancel: false,success: function (res) {if (res.confirm) {console.log('用户点击确定')}}})that.setData({btnStatus: true,})return false; }//房屋面积if (acreage == "" || acreage == null) {wx.showModal({title: "",content: '请选择您的房屋面积',showCancel: false,success: function (res) {if (res.confirm) {console.log('用户点击确定')}}})that.setData({btnStatus: true,})return false; }//姓名if (value.name == "" || value.name == null) {wx.showModal({title: "",content: '姓名不能为空，请输入姓名',showCancel: false,success: function (res) {if (res.confirm) {console.log('用户点击确定')}}})that.setData({btnStatus: true,})return false; }//电话if (value.tele == "" || value.tele == null) {wx.showModal({title: "",content: '联系电话不能为空，请输入联系电话',showCancel: false,success: function (res) {if (res.confirm) {console.log('用户点击确定')}}})that.setData({btnStatus: true,})return false; }if (!myreg.test(value.tele)) {wx.showModal({title: "",content: '请输入正确的联系电话',showCancel: false,success: function (res) {if (res.confirm) {console.log('用户点击确定')}}})that.setData({btnStatus: true,})return false; }wx.showNavigationBarLoading(); wx.request({url: app.d.ceshiUrl + 'home.booking',data: {"openid": wx.getStorageSync("openid"),"zone": userZone,"area": acreage,"name": value.name,"tel": value.tele,"mark": that.data.orderType,"desid": that.data.designerid,},success: function (res) {console.log(res)var res = res.data; var wepay_no = res.wepay_no; that.setData({wepay_no: wepay_no,}) //支付wx.request({url: app.d.ceshiUrl + 'home.pay',data: {'openid': wx.getStorageSync('openid'),'wepay_no': wepay_no,},method: 'POST', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECTheader: {'Content-Type': 'application/x-www-form-urlencoded'}, // 设置请求的 headersuccess: function (rese) {console.log(rese.data.zero)if (rese.data.zero == 1) {wx.showModal({title: '预约支付',content: '您的账户余额充足，已使用您的账户余额扣除支付',showCancel: false,success: function (res) {if (res.confirm) {console.log('用户点击确定')wx.redirectTo({url: '/pages/my/myMakeorder/myMakeorder',})}}})}else {that.payment(rese.data)} wx.hideLoading(); },fail: function () {// failwx.hideLoading(); wx.showToast({title: '网络异常！err:wxpay',duration: 2000}); }})wx.hideNavigationBarLoading(); }}) },payment: function (data) {//console.log(data); var that = this; wx.requestPayment({'timeStamp': data.timeStamp,'nonceStr': data.nonceStr,'package': data.package,'signType': 'MD5','paySign': data.paySign,success: function (res) {console.log(res)wx.showToast({title: '预约提交成功',icon: 'success',duration: 2000,success: function () {//验证支付是否成功wx.request({url: app.d.ceshiUrl + 'home.payOrderSts',data: {'wepay_no': that.data.wepay_no,},method: 'POST', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECTheader: {'Content-Type': 'application/x-www-form-urlencoded'}, // 设置请求的 headersuccess: function (rese) {console.log(rese) }})wx.redirectTo({url: '/pages/my/myMakeorder/myMakeorder',})}}); },fail: function (res) {console.log(res)wx.showToast({title: '支付取消',icon: '../../images/icon_wrong.png',duration: 2000,success: function () {wx.redirectTo({url: '/pages/designerList/designerList',})}}) }})},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () { }, /*** 生命周期函数--监听页面显示*/onShow: function () { }, /*** 生命周期函数--监听页面隐藏*/onHide: function () { }, /*** 生命周期函数--监听页面卸载*/onUnload: function () { }, /*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () { }, /*** 页面上拉触底事件的处理函数*/onReachBottom: function () { }, /*** 用户点击右上角分享*/onShareAppMessage: function () { }})

样式：

/* pages/designerList/designerDetail.wxss */.footbtn{left: 0; bottom: 0; right: 0; }.footbtn view{height: 100rpx; line-height: 100rpx; }/* 表单 */.formView{width: 100%; }.inputs{width: 100%; border-radius: 10rpx; }.inputs input{/* width: 68%; */text-align: right!important; display: inline-block; padding-right: 15rpx; }.btnsubmit{padding: 0 60rpx; border-radius:60rpx; height:70rpx; line-height:70rpx; }.btnsubmit:disabled{background: indianred; }

/* @import 'common.wxss'; *//**app.wxss**/.container {height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 200rpx 0; box-sizing: border-box; } /*padding & margin*/.p_all10,.p_all15,.p_all20,.p_all30,.p_lr10,.p_lr15,.p_lr20,.p_tb10,.p_tb20,.p_tb5,.p_lr30,.p_tb15,.p_lr5{box-sizing: border-box; }.p_all10{padding: 20rpx; }.p_all15{padding: 30rpx; }.p_all20{padding: 40rpx; }.p_all30{padding: 60rpx; }.p_lr10{padding-left: 20rpx; padding-right: 20rpx; }.p_tb10{padding-top: 20rpx; padding-bottom: 20rpx; }.p_tb5{padding-top: 10rpx; padding-bottom: 10rpx; }.p_tb15{padding-top: 30rpx; padding-bottom: 30rpx; }.p_tb20{padding-top: 40rpx; padding-bottom: 40rpx; }.p_lr5{padding-left: 10rpx; padding-right: 10rpx; }.p_lr15{padding-left: 30rpx; padding-right: 30rpx; }.p_lr20{padding-left: 40rpx; padding-right: 40rpx; }.p_lr30{padding-left: 60rpx; padding-right: 60rpx; }.p_b10{padding-bottom: 20rpx; }.p_b20{padding-bottom: 40rpx; }.p_b50{padding-bottom: 100rpx; }.m_t5{margin-top: 10rpx; }.m_t10{margin-top: 20rpx; }.m_t15{margin-top: 30rpx; }.m_t20{margin-top: 40rpx; }.m_t30{margin-top: 60rpx; }.m_r5{margin-right: 10rpx; }.m_r10{margin-right: 20rpx; }.m_r15{margin-right: 30rpx; }.m_r20{margin-right: 40rpx; }.m_b10{margin-bottom: 20rpx; }.m_b20{margin-bottom: 40rpx; }.m_tb5{margin-top: 10rpx; margin-bottom: 10rpx; }.m_tb10{margin-top: 20rpx; margin-bottom: 20rpx; }.m_tb20{margin-top: 40rpx; margin-bottom: 40rpx; }.m_lr10{margin-left:20rpx; margin-right: 20rpx; }.m_lr20{margin-left:40rpx; margin-right: 40rpx; } /*background & color*/.bg_white{background-color: white; }.bg_grayf{background-color: #f5f5f5; }.bg_graye{background-color: #eee; }.bg_theme{background-color: #ff6000; }.bg_lan{background-color: #343265; }.bg_org{background-color: #ff9f00; }.bg_black{background-color: #201e1f; }.bg_gray9{background-color: #f9f9f9; }.bg_grayc{background-color: #ccc; }.bg_gray3{background-color: #333333; }.bg_blue{background-color: #5b95ff; }.bg_gray6{background-color: #666; } .white{color: white; }.blue{color: #00cafd; }.black{color: black; }.gray2{color: #222; }.gray5{color: #555; }.gray6{color: #666; }.gray9{color: #999; }.grayc{color: #ccc; }.c_theme{color: #ff6000; }.orange{color: orange; }.yellow{color: yellow; }.green{color: green; }.red{color: red; }.priceC{color: #f17f2b; } /*font*/.font10{font-size: 20rpx; }.font12{font-size: 24rpx; }.font13{font-size: 26rpx; }.font14{font-size: 28rpx; }.font15{font-size: 30rpx; }.font16{font-size: 32rpx; }.font18{font-size: 36rpx; }.font20{font-size: 40rpx; }.font22{font-size: 44rpx; }.font24{font-size: 48rpx; }.font26{font-size: 52rpx; }.font28{font-size: 56rpx; }.fontw{font-weight: 680; }.fontw7{font-weight: 700!important; } /*border*/.bd_t{border-top: 1px solid #eee; }.bd_b{border-bottom: 1px solid #eee; }.bd_all{border: 1px solid #eee; }.bd_tb{border-top: 1px solid #eee; border-bottom: 1px solid #eee; }.bd_r{border-right: 1px solid #eee; }.bd_colorC{border-color: #ccc; } .shadowC{box-shadow: #ccc 0px 0px 15px; }.radius5{border-radius: 10rpx; }.radius10{border-radius: 20rpx; } /*伪类*/.down_ico,.left_ico,.right_ico{position: relative; height: 100rpx; line-height: 100rpx; }.right_ico::after{content: "＞"; position: absolute; height: 100rpx; line-height: 100rpx; top: 0; right: 0; color: #ccc; font-size: 24rpx; }.left_ico{position: fixed; top: 0; left: 0; right: 0; z-index: 99; }.left_ico::before{content: "＜"; position: absolute; height: 100rpx; line-height: 100rpx; top: 0; left: 10rpx; color: #fff; font-size: 40rpx; /* font-weight: 600; */} .flex{display: flex; }.block{display: block; }.inline_block{display: inline-block; }.fr{float: right; }.fl{float:left; }.tc{text-align: center; }.tl{text-align: left; }.tr{text-align: right; }.tj{text-align: justify; }.ti{text-indent: 40rpx; }.lineH_s text{line-height: 30rpx; }.lineH_m text{line-height: 50rpx; }.lineH_l text{line-height: 80rpx; }.lineH_xl text{line-height: 100rpx; }.pr{position: relative; }.pa{position: absolute; }.pf{position: fixed; } /*头像*/.imglogo{width: 150rpx; height: 150rpx; border-radius: 50%; overflow: hidden; }.imglogo-s{width: 100rpx; height: 100rpx; border-radius: 50%; overflow: hidden; } .cl{clear: both; }/*溢出省略*/.ellipsis{overflow: hidden; text-overflow:ellipsis; white-space: nowrap; } /*button*/.btn_m{display: inline-block; width: 80%; padding: 30rpx 0; text-align: center; font-size: 32rpx; margin: 10rpx 0; border: solid 1px #eee; }/* 常用 */.mask{position: fixed; top: 0; left: 0; bottom: 0; right: 0; z-index: 99; background:rgba(0, 0, 0, .5); } .tip-content-dialog{position: fixed; display: flex; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,.5); z-index: 99999; }.tip-content-dialog .tip-dialog-view{width: 80%; margin: auto; border-radius: 25rpx; vertical-align: middle; animation: tanchu 400ms ease-in; /* overflow: hidden; */padding: 20rpx; }.tip-content-dialog .btn{background: #f2f7fa; }@keyframes tanchu{from{transform: scale(0,0); -webkit-transform: scale(0,0); }to{transform: scale(1,1); -webkit-transform: scale(1,1); }}.tip-content-dialog .dialogClose{position: absolute; right:20rpx; top: 10rpx; width: 60rpx; height: 60rpx; line-height: 60rpx; text-align: center; }.navigator-hover{background-color:inherit; color: inherit; opacity: 1; } /* 评价列表 */.commentList{position: relative; padding: 20rpx 20rpx 20rpx 120rpx; background: white; border-bottom: #eee 1px solid; }.commentList .userImg{/*头像*/position: absolute; width: 80rpx; height: 80rpx; border-radius: 50%; z-index: 99; top: 20rpx; left: 20rpx; }.commentList .userName{font-size: 28rpx; color: #555; /* font-weight: 600; */}.commentList .stars image{width: 25rpx; height: 25rpx; margin-right: 6rpx; }.commentList .commentTxt{line-height: 40rpx; padding-right: 20rpx; }.commentList .imglist image{width: 90rpx; height: 90rpx; margin: 10rpx 10rpx 0px 0px; }.commentList .commentreply{background-color: #eee; line-height: 40rpx; } .dialogbtn{border: white solid 1px; border-radius: 40rpx; display: inline-block; margin: 10rpx auto; } /* 配送进度条 */.sliderbar{width: 100%; height: 12rpx; border-radius: 12rpx; background: white; margin: 90rpx auto -30rpx; }.sliderbar .barInner{height: 100%; border-radius: 15rpx; }.sliderbar .barInner .innertar{height: 100%; background: orange; border-radius: 15rpx; animation: jindu 1s ease; }@keyframes jindu {from{width: 0rpx; }to{width: 100%; }}.sliderIcon{position: absolute; width: 90rpx; height: 90rpx; z-index: 9; top: -80rpx; } /* 覆盖button样式 */button.form_button{background-color:transparent; padding:0; margin:0; display:inline; position:static; border:0; padding-left:0; padding-right:0; border-radius:0; /* font-size:0rpx; */color:transparent; }button.form_button::after{content:''; width:0; height:0; -webkit-transform:scale(1); transform:scale(1); display:none; background-color:transparent; } /* 订单小按钮 */.orderbtn{display: inline-block; border-radius:40rpx; padding: 8rpx 30rpx; }.orderbtn.defult{border: #999 1px solid; color: #666; }.orderbtn.on{border: #ff6000 1px solid; color: #ff6000; /*themeColor*/} /* public footer */.footer{z-index: 9; left: 0; right: 0; bottom: 0; height: 100rpx; } /* 授权窗口 */.isMask {width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 1000; background: #000; opacity: 0.5; } .isLogin {position: fixed; padding: 50rpx 50rpx; width: 480rpx; height: 320rpx; background: #fff; top: 50%; left: 50%; margin-left: -280rpx; margin-top: -185rpx; z-index: 1001; } .isLoginBtn {display: flex; justify-content: space-around; } .isLoginBtn button {background: #fff; width: 100%; height: 68repx; padding-left: 0rpx; padding-right: 0rpx; margin-right: 0rpx; margin-left: 0rpx; font-size: 28rpx; margin-top: 50rpx; color: #4bad37; } .loginTitle {font-size: 34rpx; } .loginshopImg {height: 80rpx; font-size: 26rpx; padding: 20rpx 0rpx; border-bottom: 1rpx solid #ececec; } .loginshopImg>image {width: 68rpx; height: 68rpx; border-radius: 50%; margin-right: 20rpx; } .isAgary {display: flex; align-items: center; font-size: 24rpx; color: #666; margin-top: 30rpx; } .isAgary>text {margin-right: 20rpx; } /* menus */.homeMenus{display: inline-block; width:20% ; }.homeMenus image{width: 80rpx; height: 80rpx; } /* modeltitle */.title image{width: 40rpx; height: 37rpx; margin-right: 20rpx; }

/**app.wxss**/.container {height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 200rpx 0; box-sizing: border-box; } /*padding & margin*/.p_all10,.p_all15,.p_all20,.p_all30,.p_lr10,.p_lr15,.p_lr20,.p_tb10,.p_tb5,.p_tb15{box-sizing: border-box; }.p_all10{padding: 20rpx; }.p_all15{padding: 30rpx; }.p_all20{padding: 40rpx; }.p_all30{padding: 60rpx; }.p_lr10{padding-left: 20rpx; padding-right: 20rpx; }.p_tb10{padding-top: 20rpx; padding-bottom: 20rpx; }.p_tb5{padding-top: 10rpx; padding-bottom: 10rpx; }.p_tb15{padding-top: 30rpx; padding-bottom: 30rpx; }.p_lr15{padding-left: 30rpx; padding-right: 30rpx; }.p_lr20{padding-left: 40rpx; padding-right: 40rpx; }.p_b10{padding-bottom: 20rpx; }.p_b20{padding-bottom: 40rpx; }.p_b50{padding-bottom: 100rpx; }.m_t5{margin-top: 10rpx; }.m_t10{margin-top: 20rpx; }.m_t20{margin-top: 40rpx; }.m_t30{margin-top: 60rpx; }.m_r5{margin-right: 10rpx; }.m_r10{margin-right: 20rpx; }.m_r20{margin-right: 40rpx; }.m_b10{margin-bottom: 20rpx; }.m_tb10{margin: 20rpx 0; }.m_lr10{margin: 0 20rpx; } /*background & color*/.bg_white{background-color: white; }.bg_grayf{background-color: #f5f5f5; }.bg_graye{background-color: #eee; }.bg_theme{background-color: #ff6000; }.bg_lan{background-color: #343265; }.bg_org{background-color: orange; }.bg_black{background-color: #201e1f; }.bg_gray9{background-color: #f9f9f9; }.bg_grayc{background-color: #ccc; } .white{color: white; }.blue{color: #00cafd; }.black{color: black; }.gray2{color: #222; }.gray5{color: #555; }.gray6{color: #666; }.gray9{color: #999; }.c_theme{color: #ff6000; }.orange{color: orange; }.yellow{color: yellow; }.red{color: red; }.priceC{color: #f17f2b; } /*font*/.font10{font-size: 20rpx; }.font12{font-size: 24rpx; }.font13{font-size: 26rpx; }.font14{font-size: 28rpx; }.font15{font-size: 30rpx; }.font16{font-size: 32rpx; }.font18{font-size: 36rpx; }.font24{font-size: 48rpx; }.fontw{font-weight: 600; } /*border*/.bd_t{border-top: 1px solid #eee; }.bd_b{border-bottom: 1px solid #eee; }.bd_all{border: 1px solid #eee; }.bd_tb{border-top: 1px solid #eee; border-bottom: 1px solid #eee; }.bd_r{border-right: 1px solid #eee; }.bd_colorC{border-color: #ccc; } .shadowC{box-shadow: #ccc 0px 0px 15px; }.radius5{border-radius: 10rpx; }.radius10{border-radius: 20rpx; } /*伪类*/.down_ico,.left_ico,.right_ico{position: relative; height: 100rpx; line-height: 100rpx; }.right_ico::after{content: "＞"; position: absolute; height: 100rpx; line-height: 100rpx; top: 0; right: 0; color: #ccc; font-size: 24rpx; }.left_ico{position: fixed; top: 0; left: 0; right: 0; z-index: 99; }.left_ico::before{content: "＜"; position: absolute; height: 100rpx; line-height: 100rpx; top: 0; left: 10rpx; color: #fff; font-size: 40rpx; /* font-weight: 600; */} .flex{display: flex; }.block{display: block; }.inline_block{display: inline-block; }.fr{float: right; }.fl{float:left; }.tc{text-align: center; }.tl{text-align: left; }.tr{text-align: right; }.tj{text-align: justify; }.ti{text-indent: 40rpx; }.lineH_s text{line-height: 30rpx; }.lineH_m text{line-height: 50rpx; }.lineH_l text{line-height: 80rpx; }.lineH_xl text{line-height: 100rpx; }.pr{position: relative; }.pa{position: absolute; } /*头像*/.imglogo{width: 140rpx; height: 140rpx; border-radius: 50%; overflow: hidden; } .cl{clear: both; }/*溢出省略*/.ellipsis{overflow: hidden; text-overflow:ellipsis; white-space: nowrap; } /*button*/.btn_m{display: inline-block; width: 80%; padding: 30rpx 0; text-align: center; font-size: 32rpx; margin: 10rpx 0; border: solid 1px #eee; }/* 常用 */.mask{position: fixed; top: 0; left: 0; bottom: 0; right: 0; z-index: 99; background:rgba(0, 0, 0, .6); } .tip-content-dialog{position: fixed; display: flex; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,.6); z-index: 99999; }.tip-content-dialog .tip-dialog-view{width: 80%; margin: auto; border-radius: 15rpx; vertical-align: middle; animation: tanchu 400ms ease-in; overflow: hidden; padding: 20rpx; }.tip-content-dialog .btn{background: #f2f7fa; }@keyframes tanchu{from{transform: scale(0,0); -webkit-transform: scale(0,0); }to{transform: scale(1,1); -webkit-transform: scale(1,1); }}.tip-content-dialog.dialogClose{right:0rpx; top: 10rpx; width: 60rpx; height: 60rpx; }.navigator-hover{background-color:inherit; color: inherit; opacity: 1; } /* 评价列表 */.commentList{position: relative; padding: 20rpx 20rpx 20rpx 120rpx; background: white; border-bottom: #eee 1px solid; }.commentList .userImg{/*头像*/position: absolute; width: 80rpx; height: 80rpx; border-radius: 50%; z-index: 99; top: 20rpx; left: 20rpx; }.commentList .userName{font-size: 28rpx; color: #555; /* font-weight: 600; */}.commentList .stars image{width: 25rpx; height: 25rpx; margin-right: 6rpx; }.commentList .commentTxt{line-height: 40rpx; padding-right: 20rpx; }.commentList .imglist image{width: 90rpx; height: 90rpx; margin: 10rpx 10rpx 0px 0px; }.commentList .commentreply{background-color: #eee; line-height: 40rpx; } .dialogbtn{border: white solid 1px; border-radius: 40rpx; display: inline-block; margin: 10rpx auto; } /* 配送进度条 */.sliderbar{width: 100%; height: 12rpx; border-radius: 12rpx; background: white; margin: 90rpx auto -30rpx; }.sliderbar .barInner{height: 100%; border-radius: 15rpx; }.sliderbar .barInner .innertar{height: 100%; background: orange; border-radius: 15rpx; animation: jindu 1s ease; }@keyframes jindu {from{width: 0rpx; }to{width: 100%; }}.sliderIcon{position: absolute; width: 90rpx; height: 90rpx; z-index: 9; top: -80rpx; }

同事的，可能代码有重复的，将就看，数据换成自己的就能用了。
【微信小程序实现表单验证源码】以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。