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

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

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

Wxml

女士

先生

提交

&lgAMWQijt;/form>

正在提交...

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 () {

}

})

}

WxValidate.js 文件点击此处本站下载。

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。