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

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

时间:2023-09-15 13:32:15浏览次数:42  
标签: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/7480364

相关文章

  • Electron-vue项目打包遇坑
    项目背景一个Electron+vue2的桌面应用项目,进行打包使用了vue-cli-plugin-electron-builder将Electron和vue结合直接使用electron-builder打包问题一:打包后,background.js中会出现模块引入报错。Electron是commonJs规范,但使用了ESM规范import{createProtocol}from'vu......
  • 问题记录:vue项目中的babel转化器是否可以转换npm install下来的依赖库,使该依赖库也可
    vue项目中的babel转化器是否可以转换npminstall下来的依赖库,使该依赖库也可以兼容es6语法?是的,Babel转换器可以用于转换通过npminstall安装的依赖库,以使其兼容ES6语法。Babel是一个广泛使用的JavaScript编译器,可以将较新版本的JavaScript代码转换为向后兼容的版本,以便在不支持这......
  • 【Vue】大悟!模板语法-插值语法&指令语法
    Vue系列持续更新模板语法Vue模板语法包括两大类插值语法插值语法也就是两个大括号,也叫Mustache功能:用于解析标签体内容,可以进行运算、三元表达式等,将最终解析出来的内容插入到标签中写法:{{xxx}},xxx是js表达式,可以直接读取到data中的所有区域插值表达式中只能放置单个表达式,不......
  • uniapp VUE-H5页面微信公众号内使用微信JSAPI支付
    注意看本文主要讲解uniapp打包成h5页面并部署在公众号时使用JSAPI的微信支付问题前期准备工作.首先要有一个开通商户注册的公众号,我们需要他的appid;.其次要开通商户公众号的公众号支付的功能并添加域名,开通完成后就可以基本开始我们的开发了既然是jsapi开发自然是要引入的......
  • element - 多表单验证必填
    方式1、该方法原文地址:https://blog.csdn.net/yprufeng/article/details/113052798方式2、//封装的js文件exportfunctionvalidateForms(formRefs){letobjectList=[];letresults=formRefs.map(formRef=>newPromise((resolve,reject)=>{......
  • springmvc中设置请求方式的转换,将post请求转换为put与delete,需要在web.xml中设置过滤
    2023-09-15web.xml<!--请求方式过滤器--><filter><filter-name>HiddenHttpMethodFilter</filter-name><filter-class>org.springframework.web.filter.HiddenHttpMethodFilter</filter-class></filter><filter......
  • Vue的快速上手
    01-Vue介绍0前端的发展史1.HTML(5)、CSS(3)、JavaScript(ES5、ES6):编写一个个的页面->给后端(PHP、Python、Go、Java)->后端嵌入模板语法->后端渲染完数据->返回数据给前端->在浏览器中查看2.Ajax的出现->后台发送异步请求,Render+Ajax混合3.单用Ajax(加载数据,DOM......
  • Vue-选择器v-model绑定对象
    Vue-选择器v-model绑定对象<template><el-selectv-model="value"placeholder="请选择"><el-optionv-for="iteminoptions":key="item.value":label="item.label":value=&quo......
  • Vue--this的指代问题及用法
    Vue--this的指代问题及用法this在普通函数(function(){})里,指代调用该函数(方法)的对象this在箭头函数(()=>{})里,指代定义该箭头函数的外层对象在axios调用当前vue实例的data:axios回调函数(.then())是在执行栈中被执行,其中this指向window,若要在axios中取后端数据并......
  • vue2.0 表单验证明明有值却提示错误
    明明有值却总是提示为空我的解决方法时将number转为字符串验证方法如图:(验证只可以输入数字)赋值时转为字符串: ......