利用你对 Bootstrap 的知识和下面的截图，修改你的表单，让它看起来像这样，添加一个 确认密码（confirm password） 输入字段
接下来，在 formData 里新增一个 confirmPassword 变量：
同时，在 errors 常量里也要加上 confirmPassword：
最后，修改确认密码的错误提示。之前写的是：
现在要改成：
编写验证函数
在 confirmPassword 输入框里调用这个函数：
<div class="col-md-6 col-sm-6">
<label for="confirm-password" class="form-label">Confirm password</label>
<input
type="password"
class="form-control"
id="confirm-password"
v-model="formData.confirmPassword"
/>
<div v-if="errors.password" class="text-danger">{{ errors.password }}</div>
</div>const formData = ref({
username: '',
password: '',
confirmPassword: '',
isAustralian: false,
reason: '',
gender: ''
})const errors = ref({
username: null,
password: null,
confirmPassword: null,
resident: null,
gender: null,
reason: null
})<div v-if="errors.password" class="text-danger">{{ errors.password }}</div><div v-if="errors.confirmPassword" class="text-danger">
{{ errors.confirmPassword }}
</div>/**
* 确认密码验证函数，检查密码和确认密码是否一致。
* @param blur: boolean - 如果为 true，在密码不匹配时显示错误信息。
*/
const validateConfirmPassword = (blur) => {
if (formData.value.password !== formData.value.confirmPassword) {
if (blur) errors.value.confirmPassword = 'Passwords do not match.'
} else {
errors.value.confirmPassword = null
}
}<div class="col-md-6 col-sm-6">
<label for="confirm-password" class="form-label">Confirm password</label>
<input
type="password"
class="form-control"
id="confirm-password"
v-model="formData.confirmPassword"
@blur="() => validateConfirmPassword(true)"
/>
<div v-if="errors.confirmPassword" class="text-danger">
{{ errors.confirmPassword }}
</div>
</div>课程目录