结合完整实例形式，分析了微信小程序完成表单验证功能所涉及的视图与逻辑操作技巧，本文主要介绍了微信小程序表单验证功能,需要的朋友可以参考下。
本文实例讲述了微信小程序表单验证功能。分享给大家供大家参考，具体如下：
Wxml
登录后复制 女士 先生 提交 正在提交…
app.js
import wxValidate from 'utils/wxValidate'
App({
wxValidate: (rules, messages) => new wxValidate(rules, messages)
})
登录后复制
news.js
var appInstance = 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)) {
const error = this.WxValidate.errorList[0]
// `${error.param} : ${error.msg} `
wx.showToast({
title: `${error.msg} `,
image: '/pages/images/error.png',
duration: 2000
})
return false
}
this.setData({ submitHidden: false })
var that = 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 () {
}
})
}
登录后复制
相关推荐：
以上就是微信小程序表单验证功能完整实例的详细内容，更多请关注GTHOST其它相关文章！
