uni-app vue3 表单验证两次密码是否相同

uni-app 开发 修改密码, 需要验证两次密码是否相同
在网上找的代码, 都是错误的
最后还是看官方文档才写好

用的官方的uni-form组件

注意是四个参数
rule, value, data, callback
网上的全是三个参数的.不带data.
不知道是改版了,还是他们瞎写的

下面是正确的 运行正常

confirm_password: {
	rules: [{
			required: true,
			errorMessage: '请再次输入新密码',
		},
		{
			validateFunction: function(rule, value, data, callback) {
				if (value != data.password) {
					callback('两次输入的密码必须相同')
				}
				return true
			}
		}
	]
}

完整代码

<template>
	<view class="wrap">
		<view>
			<uni-forms ref="form" :modelValue="formData" :rules="rules">
				<uni-forms-item name="old_password" label="旧密码">
					<uni-easyinput type="password" v-model="formData.old_password" class="input" placeholder="请输入旧密码"
						:styles="inputStyle" />
				</uni-forms-item>

				<uni-forms-item name="password" label="新密码">
					<uni-easyinput type="password" v-model="formData.password" class="input" placeholder="请输入新密码"
						:styles="inputStyle" />
				</uni-forms-item>

				<uni-forms-item name="confirm_password" label="新密码">
					<uni-easyinput type="password" v-model="formData.confirm_password" class="input"
						placeholder="请再次输入新密码" :styles="inputStyle" />
				</uni-forms-item>
			</uni-forms>
			<view class="center">
				<button type="primary" @click="submit" size="mini" class="submit-btn">保存</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		RequestChangePassword
	} from '@/common/api/user.js'
	export default {
		data() {
			return {
				formData: {
					old_password: '',
					password: '',
					confirm_password: ''

				},
				inputStyle: {
					color: '#000000',
					borderColor: '#2b6eef'
				},
				rules: {
					old_password: {
						rules: [{
								required: true,
								errorMessage: '请输入旧密码',
							},
							{
								minLength: 4,
								maxLength: 20,
								errorMessage: '用户名长度在 {minLength} 到 {maxLength} 个字符',
							}
						]
					},
					password: {
						rules: [{
								required: true,
								errorMessage: '请输入新密码',
							},
							{
								minLength: 4,
								maxLength: 20,
								errorMessage: '密码长度在 {minLength} 到 {maxLength} 个字符',
							}
						]
					},
					confirm_password: {
						rules: [{
								required: true,
								errorMessage: '请再次输入新密码',
							},
							{
								validateFunction: function(rule, value, data, callback) {
									console.log('data', data)
									if (value != data.password) {
										callback('两次输入的密码必须相同')
									}
									return true
								}
							}
						]
					}
				}
			}
		},
		methods: {
			submit() {
				this.$refs.form.validate().then(form => {
					//RequestChangePassword是我封装的修改密码的请求
					RequestChangePassword(form).then(res => {
						uni.showToast({
							title: '修改密码成功'
						})
					}).catch(err => {
						console.log('表单错误信息：', err);
					})

				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		margin: 5px;
	}
</style>