- 微信小程序使用vant组件库中Dialog组件时需要对Dialog中的表单进行校验。
- 我小程序中两个地方使用到了Dialog,一个是修改密码，另外一个是封装成组件，修改密码的Dialog使用组件给提供的
beforeClose，不过组件库给提供的方案不是很详细，在百度查了类似修改之后就可以了。 - 还有一个地方就是另外表单需要使用Dialog，这个Dialog是封装成了组件，但是vant组件库并没有给出相应具体的解决方案，下面贴出代码片段:
- 第一种不是封装成组件的Dialog异步关闭方案，别人的解决方案中说的是使用beforeClose就没必要用
bind:cancel这个事件了，我试了一下，不使用话会带来一个问题，就是点击取消按钮的时候会很慢而且要等动画执行完才会关闭。
<van-dialog use-slot title="修改密码" show-cancel-button show="{{ passwordDialog }}" before-close="{{beforeClose}}" bind:cancel="{{cancelDialog}}">
<view>
<van-cell-group>
<van-field model:value="{{ypass}}" type="password" required clearable label="原密码" placeholder="请输入原密码" border="{{true}}" error-message="{{tips.ypass}}" />
<van-field model:value="{{npass}}" type="password" label="新密码" clearable placeholder="请输入新密码" required border="{{ true }}" error-message="{{tips.npass}}" />
<van-field model:value="{{npass2}}" type="password" label="确认新密码" clearable placeholder="请确认一遍新密码" required border="{{ true }}" error-message="{{tips.npass2}}" />
</van-cell-group>
</view>
</van-dialog>
js代码：
beforeClose需要在data中先定义，写一个promise，在if (action === 'confirm') {}中加入自己想要的检验，每一个判断结束后面加上resolve(true)或者resolve(false)，控制Dialog状态。
data: {
coverTransform: 'translateY(0)',
coveTransition: '',
clearDialog: false, // 定义清除Dialog的状态
message: '将会关闭并且退出小程序',
username: '', //这个是用户名
passwordDialog: false, // 修改密码的弹框
// 修改密码这个输入框双向绑定的信息
ypass: '',
npass: '',
npass2: '',
// 输入框的校验信息
tips: {
ypass: '',
npass: '',
npass2: ''
},
// 当前登陆的用户的id，用于修改密码
id: 0,
beforeClose: {},
},
onLoad(options) {
var that = this
that.setData({
beforeClose: (action) => this.onBeforeClose(action)
})
},
// dialog的回调函数
onBeforeClose: function(action) {
return new Promise((resolve) => {
if (action === 'confirm') {
if (this.data.ypass == '') {
this.setData({
["tips.ypass"]: '密码不能为空',
["tips.npass"]: '',
['tips.npass2']: '',
})
resolve(false)
} else if (this.data.npass == '') {
this.setData({
["tips.ypass"]: '',
["tips.npass"]: '密码不能为空',
['tips.npass2']: '',
})
resolve(false)
} else if (this.data.npass2 == '') {
this.setData({
["tips.ypass"]: '',
["tips.npass"]: '',
['tips.npass2']: '密码不能为空',
})
resolve(false)
} else if(this.data.npass != this.data.npass2){
wx.showToast({
title: '两次密码输入不一致',
icon: 'none',
duration: 1000
})
resolve(false)
} else {
wx.request({
url: config.host + '/liangzhu/updatePass', //接口地址
method: "post",
data: {
userid: this.data.id,
npass: this.data.npass2,
ypass: this.data.ypass
},
header: {
token: wx.getStorageSync('token')
},
success (res) {
console.log('res',res)
if (res.data.code == 200) {
wx.showToast({
icon: 'none',
title: '修改成功',
})
this.setData({
ypass: '',
npass: '',
npass2: ''
})
resolve(true)
} else if (res.data.code == 400) {
wx.showToast({
icon: 'none',
title: '原始密码错误，请重新输入',
})
resolve(false)
}else if (res.data.code == 407) {
wx.showToast({
icon: 'none',
title: '登陆过期,请重新登陆',
})
wx.reLaunch({
url: '../login/login',
})
this.setData({
ypass: '',
npass: '',
npass2: ''
})
resolve(true)
}
}
})
}
} else {
this.setData({
ypass: '',
npass: '',
npass2: '',
// passwordDialog: false
})
// 拦截取消操作
resolve(true)
}
})
},
- 第二种就是在封装的组件中对Dialog组件使用beforeClose事件，先在data中写一个promise，
data: {
beforeClose(action) {
return new Promise((resolve) => {
setTimeout(() => {
if (action === 'confirm') {
// 拦截确认操作
resolve(false);
} else {
resolve(true);
}
}, 0);
});
}
},
<van-dialog use-slot title="{{title}}" show="{{ xzzlDialog }}" show-cancel-button bind:confirm="endDialog" before-close="{{ beforeClose }}"></van-dialog>
js: 直接写Dialog中的校验就可以不用加resolve(true)或者resolve(false)
async endDialog(e) {
if (this.data.zuhu == '') {
wx.showToast({
icon: 'none',
title: '格式错误，请重新填写',
})
this.setData({
['tips.zuhu']: '请输入租户名(必填项)'
})
return
} else {
// console.log('表单信息',this.properties.id,this.data.zuhu,this.data.zujing,this.data.zlmj)
this.data.zlsj.push(this.data.beginCurrentChoose)
this.data.zlsj.push(this.data.endCurrentChoose)
this.setData({
id: this.properties.zlid,
fwxxId: this.properties.fwxxId ? this.properties.fwxxId : '',
// xzzlDialog: false,
})
if (this.properties.zlid) {
let bjzl = await request('/lz_zsfwxx_history/saveOrUpdateZhaoshangFwxx','post',{
fwxxId: '',
id: this.data.id,
zuhu: this.data.zuhu,
zujing: this.data.zujing,
zlmj: this.data.zlmj,
zlsj: this.data.zlsj,
});
console.log('编辑',bjzl)
let options = this.data.fwxxId
this.triggerEvent('updataSelect',options)
} else {
let xzzl = await request('/lz_zsfwxx_history/saveOrUpdateZhaoshangFwxx','post',{
fwxxId: this.data.fwxxId,
zuhu: this.data.zuhu,
zujing: this.data.zujing,
zlmj: this.data.zlmj,
zlsj: this.data.zlsj,
});
console.log('新增',xzzl)
let options = this.data.fwxxId
this.triggerEvent('updataSelect',options)
}
}
this.onDialog()
},
