微信小程序中的正则验证、手机号验证随笔需求:小程序开发中的表单提交,涉及到手机号验证,必填项验证等问题1.

微信小程序中不通过操作DOM节点来实现验证,因此绝了我想要通过节点直接获取值进行验证的想法

$("body").on("blur",".input",function(){console.log($(.input).val())})思路:2.

在inputonblur的时候进行存值,(注意多个input框的时候存值不要混淆)在多个input框中同时存在手机号验证的可以统一绑定同一个方法,通过不同的传值进行判断存值.表单提交的时候进行必填字段非空校验示例代码如下:js部分

blurCheck:function(e){vartmthis;if(e.detail.value!""){varxe.currentTarget.dataset.keyif(x'joinName'){tm.setData({joinName:e.detail.value})}elseif(x'joinConcat'){tm.setData({joinConcat:e.detail.value})}elseif(x'joinPhone'){if(!/^1(3|4|5|7|8)d{9}$/.test(e.detail.value)){wx.showModal({title:'提示',content:'你输入的电话不符，请重新检查填写',showCancel:false})tm.setData({focus:true})}else{tm.setData({joinPhone:e.detail.value,focus:false})}}elseif(x'joinGoods'){tm.setData({joinGoods:e.detail.value})}elseif(x'joinBrand'){tm.setData({joinBrand:e.detail.value})}elseif(x'joinUrl'){tm.setData({joinUrl:e.detail.value})}}},formSubmit:function(e){vartmthis;this.setData({formId:e.detail.formId,UploadGredentials:[]});varp[];tm.data.UserCredentials.find(function(e,tm){"../../images/return-img_03.jpg"!ep.push(e);}),tm.UploadBatchImages(tm,p);if(this.data.joinName""){wx.showModal({title:"提示",content:"请输入联系人",showCancel:false,confirmColor:"#db3c40"});}elseif(this.data.joinConcat""){wx.showModal({title:"提示",content:"请输入联系人",showCancel:false,confirmColor:"#db3c40"});}elseif(!(/^1(3|4|5|7|8)d{9}$/.test(this.data.joinPhone))){wx.showModal({title:"提示",content:"请输入正确的联系方式",showCancel:false,confirmColor:"#db3c40"});}elseif(this.data.joinGoods""){wx.showModal({title:"提示",content:"请输入经营商品",showCancel:false,confirmColor:"#db3c40"});}elseif(this.data.joinBrand""){wx.showModal({title:"提示",content:"请输入正确的退货数量",showCancel:false,confirmColor:"#db3c40"});}elseif(this.data.joinUrl""){wx.showModal({title:"提示",content:"请输入正确的退货数量",showCancel:false,confirmColor:"#db3c40"});}else{this.setData({formId:e.detail.formId,UploadGredentials:[]});varp[];tm.data.UserCredentials.find(function(e,tm){"../../images/return-img_03.jpg"!ep.push(e);}),tm.UploadBatchImages(tm,p);}},UploadBatchImages:function(t,a){varna.shift();void0!n?e.getOpenId(function(o){wx.uploadFile({url:e.getUrl("UploadAppletImage"),filePath:n,name:"file",formData:{openId:o},success:function(e){varaJSON.parse(e.data);if("OK"a.Status){varnt.data.UploadGredentials;n.push(a.Data[0].ImageUrl),t.setData({UploadGredentials:n});}else"NOUser"a.Message?wx.navigateTo({url:"../login/login"}):wx.showModal({title:"提示",content:a.ErrorResponse.ErrorMsg,showCancel:!1,confirmColor:"#db3c40",success:function(e){e.confirmwx.navigateBack({delta:1});}});},complete:function(){a.length0?t.UploadBatchImages(t,a):t.AddReturnInfo();}});}):t.AddReturnInfo();},AddReturnInfo:function(){vartthis;e.getOpenId(function(a){wx.request({url:e.getUrl("YTALApplySupplier"),data:{openid:a,supplier:t.data.joinName,brand:t.data.joinBrand,contactname:t.data.joinConcat,mobile:t.data.joinPhone,goods:t.data.joinGoods,shopurl:t.data.joinUrl,remark:t.data.xxxxxxxxxxxxxxxxxx,imgs:t.data.UploadGredentials.join(","),formId:t.data.formId},success:function(e){debugger"OK"e.data.Status?wx.showModal({title:"提示",confirmColor:"#db3c40",content:e.data.Message,showCancel:!1,success:function(res){if(res.confirm){wx.switchTab({url:"../usehome/usehome"});}}}):"NOUser"e.data.message?wx.navigateTo({url:"../login/login"}):wx.showModal({title:"提示",confirmColor:"#db3c40",content:e.data.message,showCancel:!1,success:function(e){e.confirmwx.navigateBack({delta:1});}});},complete:function(){}});});},3.

页面展示部分(附带了多图片上传)

formbindsubmit"formSubmit"reportSubmit"true"!--viewclass"form-groupbg-white"style'padding-top:110rpx;'--viewclass"form-groupbg-white"viewclass"form-group-name"供应商/viewinputdata-key"joinName"maxlength"20"placeholder"请输入公司名称"placeholderStyle"color:#bdbdbd"type"text"bindblur"blurCheck"/input/viewviewclass"form-groupbg-white"viewclass"form-group-name"联系人/viewinputdata-key"joinConcat"maxlength"20"placeholder"请输入联系人"placeholderStyle"color:#bdbdbd"type"text"bindblur"blurCheck"/input/viewviewclass"form-groupbg-white"viewclass"form-group-name"联系电话/viewinputdata-key"joinPhone"maxlength"20"placeholder"请输入联系人手机号"placeholderStyle"color:#bdbdbd"type"number"bindblur"blurCheck"/input!--inputdata-key"joinPhone"maxlength"20"placeholder"请输入联系人手机号"placeholderStyle"color:#bdbdbd"type"number"bindblur"blurCheck"focus'{{focus}}'/input--/viewviewclass"form-groupbg-white"viewclass"form-group-name"经营商品/viewinputdata-key"joinGoods"maxlength"20"placeholder"请描述售卖商品品类"placeholderStyle"color:#bdbdbd"type"text"bindblur"blurCheck"/input/viewviewclass"form-groupbg-white"viewclass"form-group-name"授权品牌/viewinputdata-key"joinBrand"maxlength"20"placeholder"请输入售卖商品品牌"placeholderStyle"color:#bdbdbd"type"text"bindblur"blurCheck"/input/viewviewclass"form-groupbg-white"viewclass"form-group-name"店铺网址/viewinputdata-key"joinUrl"maxlength"20"placeholder"支持淘宝、京东、拼多多等主流电商平台"placeholderStyle"color:#bdbdbd"type"text"bindblur"blurCheck"/input/viewviewclass"line"view/view/viewviewclass"beizhu"viewclass"form-group-name"备注/view/viewviewclass"beizhubg-white"textareaclass"group-area"name"txtarea"placeholder"在此输入备注"/textarea/viewviewclass"beizhu"style"border-bottom:1rpxsolid#fff;"viewclass"form-group-name"style'width:500rpx;'上传凭证(提交三证合一、授权证书等)/view/viewviewclass"beizhubg-white"style"display:flex"viewbindtap"uploadImg"class"uploadimg"data-index"0"imagesrc"{{UserCredentials[0]}}"style"width:158rpx;height:158rpx;"/image/viewviewbindtap"uploadImg"class"uploadimg"data-index"1"imagesrc"{{UserCredentials[1]}}"style"width:158rpx;height:158rpx;"/image/viewviewbindtap"uploadImg"class"uploadimg"data-index"2"imagesrc"{{UserCredentials[2]}}"style"width:158rpx;height:158rpx;"/image/view/viewviewclass"btn"buttonclass"submit"formType"submit"确定提交/buttonnavigatorclass"cancel"openType"navigateBack"取消/navigator/view/form4.

css部分因项目差距较大,就不放了

5.

谨以此文献给正在开发岗位上奋斗爬坑的有志青年!共勉