vue3自定义确认密码匹配验证规则的操作代码
更新时间:2024年01月11日 12:00:00 作者:7.9
这篇文章主要介绍了vue3自定义确认密码匹配验证规则的操作代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
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>
扩展:
vue中表单使用自定义验证规则
vue中表单使用自定义验证规则(以2次输入密码为例)
先安装elementUI
yarn add element-ui
mian.js中引入elementUI
import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI);
创建表单
<el-form ref="form" :model="form" :rules="rules"> <el-form-item label="新密码" prop="newPwd"> <el-input type="password" v-model="form.newPwd"></el-input> </el-form-item> <el-form-item label="确认密码" prop="confirmPwd"> <el-input type="password" v-model="form.confirmPwd"></el-input> </el-form-item> <el-form-item> <el-button @click="confirmBtn">确认</el-button> <el-button @click="resetBtn">重置</el-button> </el-form-item> </el-form>
定义数据及验证规则
data() { var checkPwd = (rule, value, callback) => { if (value === this.form.newPwd) { callback(); } else { callback(new Error('两次输入密码不一致!')); } } return { form: { newPwd: '', confirmPwd: '' }, rules: { newPwd: [ { required: true, message: '请输入密码', trigger: 'blur' }, { min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur' } ], confirmPwd: [ { required: true, message: '请再次输入密码', trigger: 'blur' }, { min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur' }, { validator: checkPwd, trigger: 'blur' } ] } } },
绑定操作按钮
methods: { //确认按钮 confirmBtn() { this.$refs.form.validate(res => { if (res) { console.log('修改成功'); } else { console.log('修改失败'); return false; } }); }, //重置按钮 resetBtn() { this.$refs.form.resetFields(); } }
到此这篇关于vue3自定义确认密码匹配验证规则的文章就介绍到这了,更多相关vue3自定义密码验证规则内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
Electron store及shareObject进程间数据交互存储功能封装
这篇文章主要为大家介绍了Electron store及shareObject进程间数据交互存储功能封装示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2022-09-09Element ui中menu组件(el-menu/el-menu-item/el-submenu/template)
最近在使用Element开发时遇到了不少问题,下面这篇文章主要给大家介绍了关于Element ui中menu组件(el-menu/el-menu-item/el-submenu/template)层级结构与用法的相关资料,需要的朋友可以参考下2022-12-12vue@cli3项目模板怎么使用public目录下的静态文件
这篇文章主要介绍了vue@cli3项目模板怎么使用public目录下的静态文件,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2020-07-07Vue解决echart在element的tab切换时显示不正确问题
这篇文章主要介绍了Vue解决echart在element的tab切换时显示不正确问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
最新评论