vue3自定义确认密码匹配验证规则

复制代码
// 自定义确认密码匹配验证规则
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>
相关推荐
前端之虎陈随易14 小时前
2年没用Nodejs了,Bun很香
linux·前端·javascript·vue.js·typescript
好运的阿财15 小时前
OpenClaw工具拆解之host_workspace_write+host_workspace_edit
前端·javascript·人工智能·机器学习·ai编程·openclaw·openclaw工具
XiYang-DING15 小时前
JavaScript
开发语言·javascript·ecmascript
空中海16 小时前
02 React Native状态、导航、数据流与设备能力
javascript·react native·react.js
空中海16 小时前
02 状态、Hooks、副作用与数据流
开发语言·javascript·ecmascript
abcnull17 小时前
传统的JavaWeb项目Demo快速学习!
java·servlet·elementui·vue·javaweb
空中海17 小时前
04 React Native工程化、质量、发布与生态选型
javascript·react native·react.js
杨超凡17 小时前
豆包收费了?我特么自己用“意念”搓了一个!
javascript
threelab18 小时前
Three.js 咖啡杯烟雾效果 | 三维可视化 / AI 提示词
开发语言·javascript·人工智能