微客导航 » 文章资讯 » 微信小程序表单验证功能完整实例

微信小程序表单验证功能完整实例

2023-09-20 04:53:05 350

本文实例讲述了微信小程序表单验证功能。分享给大家供大家参考，具体如下：

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文件点击此处本站下载。

希望本文所述对大家微信小程序开发有所帮助。

返回顶部
3162201930
czq8825@qq.com

微信小程序表单验证功能完整实例

热门推荐

随机推荐