微信小程序表单验证功能完整实例
本文实例讲述了微信小程序表单验证功能。分享给大家供大家参考,具体如下:
Wxml
女士 先生 提交 正在提交...
app.js
importwxValidatefrom'utils/wxValidate' App({ wxValidate:(rules,messages)=>newwxValidate(rules,messages) })
news.js
varappInstance=getApp() //表单验证初始化 onLoad:function(){ this.WxValidate=appInstance.WxValidate( { name:{ required:true, minlength:2, maxlength:10, }, mobile:{ required:true, tel:true, }, company:{ required:true, minlength:2, maxlength:100, }, client:{ required:true, minlength:2, maxlength:100, } } ,{ name:{ required:'请填写您的姓名姓名', }, mobile:{ required:'请填写您的手机号', }, company:{ required:'请输入公司名称', }, client:{ required:'请输入绑定客户', } } ) }, //表单提交 formSubmit:function(e){ //提交错误描述 if(!this.WxValidate.checkForm(e)){ consterror=this.WxValidate.errorList[0] //`${error.param}:${error.msg}` wx.showToast({ title:`${error.msg}`, image:'/pages/images/error.png', duration:2000 }) returnfalse } this.setData({submitHidden:false}) varthat=this //提交 wx.request({ url:'', data:{ Realname:e.detail.value.name, Gender:e.detail.value.gender, Mobile:e.detail.value.mobile, Company:e.detail.value.company, client:e.detail.value.client, Identity:appInstance.userState.identity }, method:'POST', success:function(requestRes){ that.setData({submitHidden:true}) appInstance.userState.status=0 wx.navigateBack({ delta:1 }) }, fail:function(){ }, complete:function(){ } }) }
WxValidate.js文件点击此处本站下载。
希望本文所述对大家微信小程序开发有所帮助。