WeChatウィジェットのフォーム検証機能の完全な例
4389 ワード
本明細書の例は、WeChatウィジェットのフォーム検証機能を説明する。皆さんに参考にしてあげます。具体的には以下の通りです。
Wxml
ここで述べたように、皆様のマイクロクレジットのプログラム開発に役に立ちます。
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)
})
ニュース.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ファイルはここをクリックしてダウンロードです。ここで述べたように、皆様のマイクロクレジットのプログラム開発に役に立ちます。