首页 > 其他分享 >vue实现请再次输入密码的表单校验

vue实现请再次输入密码的表单校验

时间:2023-12-02 17:31:30浏览次数:36  
标签:password2 vue 校验 表单 密码 trigger blur message 输入

1、获取第一次输入的密码的值

2、比较两次密码的值是否相等

3、如果不一致返回错误信息

this.userInfo.password2:获取第一次输入的密码;value当前校验值;validator自定义校验规则;
const ConfirmPassword = (rule, value, callback) => {
   if (value !== this.userInfo.password2) {
     callback(new Error('两次输入密码不一致!'))
   } else {
    callback()
   }
}

userInfo: {
     username: '',
     password2: '',
     password3: ''
   },
   rules: {
     username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
     password2: [{ required: true, message: '请输入密码', trigger: 'blur' }, 
                 { min: 6, max: 9, message: '密码长度6-9位', trigger: 'blur'}],
     password3: [{ required: true, message: '确认密码不能为空', trigger: 'blur' },
                 { trigger: 'blur', validator: ConfirmPassword }]
   }

vue实现请再次输入密码的表单校验_自定义

标签:password2,vue,校验,表单,密码,trigger,blur,message,输入
From: https://blog.51cto.com/u_15961699/8658156

相关文章

  • Vue3 + TS 搭建组件库
    开始在编写组件库之前,我们首先要对整个代码项目的解构有一个清晰的划分,以及用到的大多数规范,和代码风格有一个约定,这篇文章主要就围绕着下面图中的几个问题展开描述一下。1、搭建monorepo环境我们使用pnpm当做包管理工具,用pnpmworkspace来实现monorepo。可以看下面参考文章......
  • vue 富文本编辑器 wangeditor 自定义上传图片 以及 解决 复制粘贴 word 没有图片的情
    本人比较喜欢用这一款编辑器,官方文档:(用于VueReact|wangEditor),很详细。我主要来说说怎么使用customPaste自定义粘贴的,怎么解决复制粘贴word,没有图片的情况。主要是关于wangeditor在vue2的使用效果图:先把完整代码放这里:<template><divclass="addpost_course"......
  • vue3使用富文本编辑器wangEditor 5,增加自定义下拉框,并动态改变下拉框内容
    官方资料wangEditor官网效果展示准备工作这里按照wangEditor官网提供的Vue3Demo操作就行,下面的内容可以直接跳过安装yarnadd@wangeditor/editor#或者npminstall@wangeditor/editor--saveyarnadd@wangeditor/editor-for-vue@next#或者npminstall@w......
  • Vue源码学习(十七):实现computed计算属性
    好家伙,本章我们尝试实现computed属性 0.完整代码已开源https://github.com/Fattiger4399/analytic-vue.git 1.分析1.1computed的常见使用方法1.计算依赖数据:当某个数据发生变化时,computed属性可以自动更新,并返回计算结果。例如:<template><div><p>用户姓名:{{u......
  • [Vue] vue如何监控数据的
    vue会监测data属性下所有层次的数据变化监控对象中的数据通过setter监控,在新建vue实例时就要传入要监控的数据对象中含有的,之后追加的属性,vue默认不做响应式处理,即没有对应的getter/setter如果需要响应式处理,要利用对应的APIVue.set(target,propertyName/index,value)......
  • 关于Vue3中调试APP触发异常:exception:white screen cause create instanceContext fai
    bug:reportJSException>>>>exceptionfunction:createInstanceContext,exception:whitescreencausecreateinstanceContextfailed,checkjsstack->atuseStore(app-service.js:2309:15)问题在于:使用了pinia,并且在所有js文件或ts文件中调用超前,导致的加载错误 解决方......
  • vue3+vite项目优化静态资源使用云存储
    项目中的问题1.当我们在维护自己的博客或者自己的网站的时候没有特别好的服务器就会响应特别的慢2.当我们项目特别大的时候也会首屏加载特别慢而且vue项目打包后的js文件特别的庞大还要加载各种资源就会特别的卡顿3.当我们项目中用到了一些3D效果各种3D资源部特别的大的时......
  • 金蝶云星空表单插件单据体批量删除,序号自增
    一、字段标识说明单据体标识:FEntity序号标识:Seq物料标识:F_XXXX_MaterialId【一键删除】操作标识:CleanEmptyEntity 二、表单插件 三、获取单据体数据包//获取单据体,为空提示操作失败varentityD=this.View.Model.DataObject["FEntity"]asDynamicObjectCollection;i......
  • vue2+element 表单内使用el-rate组件时,校验失败后重新校验通过了,但校验提示信息未消
    问题:el-rate组件自定义的校验规则,必填项。打开表单,不做任何动作,点击提交,这时表单校验一次,然后再选择el-rate组件的评分,校验提示却并未消除。问题复现:1.打开表单,直接点确定 2.填写完所有的选项后,仍未消除提示 解决:首先排除了v-model是否绑定正确,单词有无错误,校验有没有写......
  • js vue中pdf与img互转
    需要npminstallvue-pdf和npminstallpdfjs-dist,新建js文件pdtToImg.js:importpdffrom"vue-pdf";importJsPDFfrom'pdfjs-dist';constPDFJS=require('pdfjs-dist/build/pdf.js');//import会报错window.pdfjsWorker=require('......