当前位置: 首页 > news >正文

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-dialogv-model="AddDialog"title="新增会员"width="700px"@close="closeDialog"><el-formref="categoryFormRef":model="addData":rules="rules"label-width="120px"><el-form-item label="支付密码" prop="payPwd"><el-inputv-model="addData.payPwd"placeholder="请输入支付密码"show-passwordmaxLength="6"/></el-form-item><el-form-item label="确认支付密码" prop="repeatedPwd"><el-inputv-model="addData.repeatedPwd"placeholder="请输入支付密码"show-passwordmaxLength="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>

http://www.lryc.cn/news/277413.html

相关文章:

  • 岗位所处定位,岗位职责
  • 2024阿里云服务器配置推荐方案
  • OceanBase原生分布式数据库
  • 首次使用go-admin
  • 软件工程概论---内聚性和耦合性
  • 纯血鸿蒙「扩圈」100天,酝酿已久的突围
  • UICollection Compositional Layout全详解
  • 单例模式的模板
  • C#基础-空处理
  • 测试平台开发vue组件化重构前端代码
  • 龍运当头--html做一个中国火龙祝大家龙年大吉
  • Dockerfile语法和简单镜像构建
  • uniapp使用wxml-to-canvas开发小程序保存canvas图片
  • 关于数据库切换的麻烦
  • Qt/QML编程学习之心得:Linux下读写文件File(24)
  • 【Vue2+3入门到实战】(22)VUE3之组合式API - setup、reactive和ref函数、computed、watch、生命周期函数详细讲解
  • 如何在互联网上找到你想要的数据?
  • 揭秘淘宝商品详情API如何助力电商创新发展
  • vue element plus Space 间距
  • 【驱动序列】C#获取电脑硬件之CPU信息,以及它都有那些品牌
  • 目标检测-One Stage-YOLO v3
  • 安泰ATA-4014高压功率放大器在传感器脉冲涡流检测中的应用
  • Axure全面指南:正确打开并高效使用的步骤!
  • ts axios 指定返回值类型,返回数据类型不确定该怎么办 typescript
  • 判断是否是json字符串
  • SpringBoot集成Minio(接上文)
  • 更新 torchtext 造成的torch版本不匹配的问题
  • flutter资源
  • C++经典程序
  • Java多线程-Thread类的run方法