// 自定义确认密码匹配验证规则
const matchPassword = (rules:any, value:any, callback:any) => {
if (value != addData.payPwd) {
callback(new Error('两次密码输入不一致!'))
} else {
callback()
}
}
const rules = reactive({
payPwd: [
{ required: true, message: "请输入支付密码", trigger: "blur" },
{
pattern: /^\d+$/,
message: "只能输入6位数字",
trigger: "blur",
},
],
repeatedPwd: [
{ required: true, message: "请输入支付密码", trigger: "blur" },
{
pattern: /^\d+$/,
message: "只能输入6位数字",
trigger: "blur",
},
{validator: matchPassword, trigger: 'blur'}
],
});
<el-dialog
v-model="AddDialog"
title="新增会员"
width="700px"
@close="closeDialog"
>
<el-form
ref="categoryFormRef"
:model="addData"
:rules="rules"
label-width="120px"
>
<el-form-item label="支付密码" prop="payPwd">
<el-input
v-model="addData.payPwd"
placeholder="请输入支付密码"
show-password
maxLength="6"
/>
</el-form-item>
<el-form-item label="确认支付密码" prop="repeatedPwd">
<el-input
v-model="addData.repeatedPwd"
placeholder="请输入支付密码"
show-password
maxLength="6"
/>
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="handleAdd">确 定</el-button>
<el-button @click="closeDialog">取 消</el-button>
</div>
</template>
</el-dialog>
vue3自定义确认密码匹配验证规则
7.92024-01-07 8:25
相关推荐
懒大王爱吃狼1 小时前
Python教程:python枚举类定义和使用待磨的钝刨2 小时前
【格式化查看JSON文件】coco的json文件内容都在一行如何按照json格式查看Devil枫5 小时前
Vue 3 单元测试与E2E测试GIS程序媛—椰子6 小时前
【Vue 全家桶】6、vue-router 路由(更新中)前端青山7 小时前
Node.js-增强 API 安全性和性能优化毕业设计制作和分享7 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue程序媛小果7 小时前
基于java+SpringBoot+Vue的旅游管理系统设计与实现从兄8 小时前
vue 使用docx-preview 预览替换文档内的特定变量凉辰9 小时前
设计模式 策略模式 场景Vue (技术提升)清灵xmf9 小时前
在 Vue 中实现与优化轮询技术