结合完整实例形式，分析了微信小程序完成表单验证功能所涉及的视图与逻辑操作技巧，本文主要介绍了微信小程序表单验证功能,需要的朋友可以参考下。
本文实例讲述了微信小程序表单验证功能。分享给大家供大家参考，具体如下：
wxml
<form bindsubmit="formsubmit" bindreset="formreset">
<input name="name" class="{{whoclass=='name'?'placeholderclass':'inputclass'}}" placeholder="请填写您的姓名" type="text" confirm-type="next" focus="{{whofocus=='name'?true:false}}" bindblur="nameblurfocus" />
<radio-group name="gender" bindchange="radiochange">
<radio value="0" checked />女士
<radio value="1" />先生
</radio-group>
<input name="mobile" class="{{whoclass=='mobile'?'placeholderclass':'inputclass'}}" type="number" maxlength="11" placeholder="请填写您的手机号" bindblur="mobileblurfocus" focus="{{whofocus=='mobile'?true:false}}" />
<input name="company" class="{{whoclass=='company'?'placeholderclass':'inputclass'}}" placeholder="公司名称" type="text" confirm-type="next" focus="{{whofocus=='company'?true:false}}" />
<input name="client" class="{{whoclass=='client'?'placeholderclass':'inputclass'}}" placeholder="绑定客户" type="text" confirm-type="done" focus="{{whofocus=='client'?true:false}}" />
<button formtype="submit">提交</button>
</form>
<loading hidden="{{submithidden}}">
正在提交...
</loading>
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 () {
}
})
}
相关推荐：
使用jquery实现智能表单验证功能_jquery
css3和html5实现表单验证功能的示例详解
javascript表单验证功能的介绍
php如何实现微信小程序支付及退款
微信小程序开发入门实例
以上就是微信小程序表单验证功能完整实例的详细内容。