vue 验证两次输入的密码是否一致的方法示例


Posted in Javascript onSeptember 29, 2020

好记性不如烂笔头。总也记不住

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
       <el-form-item label="新密码" prop="newPwd">
        <el-input v-model="ruleForm.newPwd" clearable size="small" type="password"></el-input>
       </el-form-item>
       <el-form-item label="确认密码" prop="confirmPwd">
        <el-input v-model="ruleForm.confirmPwd" clearable size="small" type="password"></el-input>
       </el-form-item>
       <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')" class="button">确定</el-button>
        <el-button @click="resetForm('ruleForm')" class="button">重置</el-button>
       </el-form-item>
</el-form>

验证两次密码是否一致 却保证输入的密码在6-16个字符之间

关键代码如下:

data() {
   var validatePass = (rule, value, callback) => {
    if (value === '') {
        callback(new Error('请输入密码'));
    } else {
     if (this.ruleForm.confirmPwd !== '') {
       this.$refs.ruleForm.validateField('confirmPwd');
     }
     callback();
    }
   };
   var validatePass2 = (rule, value, callback) => {
     if (value === '') {
       callback(new Error('请再次输入密码'));
     } else if (value !== this.ruleForm.newPwd) {
       callback(new Error('两次输入密码不一致!'));
     } else {
       callback();
     }
   };
   return {
    changePwdDialog:false,//修改密码弹框
    ruleForm: {
     newPwd: '',
     confirmPwd:''
    },
    rules: {
     newPwd: [
      { required: true, message: '请输入密码', trigger: 'blur' },
      { min: 6, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur' },
      { validator: validatePass, trigger: 'blur' }
     ],
     confirmPwd:[
      { required: true, message: '请确认密码', trigger: 'blur' },
      { min: 6, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur' },
      { validator: validatePass2, trigger: 'blur', required: true }
     ],
    }
   }
  },

到此这篇关于vue 验证两次输入的密码是否一致的方法示例的文章就介绍到这了,更多相关vue 输入密码验证内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
document.getElementById的简写方式(获取id对象的简略写法)
Sep 10 Javascript
autoIMG 基于jquery的图片自适应插件代码
Mar 12 Javascript
jquery js 重置表单 reset()具体实现代码
Aug 05 Javascript
jQuery验证插件 Validate详解
Nov 20 Javascript
JavaScript实现基于十进制的四舍五入实例
Jul 17 Javascript
D3.js实现散点图和气泡图的方法详解
Sep 21 Javascript
jQuery实现图片轮播效果代码
Sep 27 Javascript
详解网站中图片日常使用以及优化手法
Jan 09 Javascript
vue监听滚动事件实现滚动监听
Apr 11 Javascript
利用vscode编写vue的简单配置详解
Jun 17 Javascript
Angular实现的日程表功能【可添加及隐藏显示内容】
Dec 27 Javascript
详解如何解决Vue和vue-template-compiler版本之间的问题
Sep 17 Javascript
JS中队列和双端队列实现及应用详解
Sep 29 #Javascript
js实现贪吃蛇游戏(简易版)
Sep 29 #Javascript
js实现星星海特效的示例
Sep 28 #Javascript
vue中重定向redirect:‘/index‘,不显示问题、跳转出错的完美解决
Sep 28 #Javascript
Openlayers绘制聚合标注
Sep 28 #Javascript
Openlayers绘制地图标注
Sep 28 #Javascript
Openlayers实现图形绘制
Sep 28 #Javascript
You might like
PHP中使用unset销毁变量并内存释放问题
2012/07/05 PHP
关于PHP自动判断字符集并转码的详解
2013/06/26 PHP
php生成Android客户端扫描可登录的二维码
2016/05/13 PHP
PHP实现的redis主从数据库状态检测功能示例
2017/07/20 PHP
利用PHP访问MySql数据库的逻辑操作以及增删改查的实例讲解
2017/08/30 PHP
php 多个变量指向同一个引用($b = &amp;$a)用法分析
2019/11/13 PHP
Jquery 插件开发笔记整理
2011/01/17 Javascript
javascript开发技术大全 第4章 直接量与字符集
2011/07/03 Javascript
HTML中的setCapture和releaseCapture使用介绍
2012/03/21 Javascript
JavaScript删除数组元素的方法
2015/03/20 Javascript
jQuery插件实现文件上传功能(支持拖拽)
2020/08/27 Javascript
Vue 2.0学习笔记之Vue中的computed属性
2017/10/16 Javascript
js实现随机点名系统(实例讲解)
2017/10/18 Javascript
Vue 将后台传过来的带html字段的字符串转换为 HTML
2018/03/29 Javascript
解决webpack多页面内存溢出的方法示例
2019/10/08 Javascript
利用Python中SocketServer 实现客户端与服务器间非阻塞通信
2016/12/15 Python
Python使用Scrapy保存控制台信息到文本解析
2017/12/27 Python
padas 生成excel 增加sheet表的实例
2018/12/11 Python
在Pycharm中设置默认自动换行的方法
2019/01/16 Python
Python hexstring-list-str之间的转换方法
2019/06/12 Python
python实现复制文件到指定目录
2019/10/16 Python
Python笔记之观察者模式
2019/11/20 Python
python 实现将小图片放到另一个较大的白色或黑色背景图片中
2019/12/12 Python
python Django 反向访问器的外键冲突解决
2020/05/20 Python
python3.6中anaconda安装sklearn踩坑实录
2020/07/28 Python
详解如何将 Canvas 绘制过程转为视频
2021/01/25 HTML / CSS
英国翻新电子产品购物网站:Tech Trade
2017/12/25 全球购物
巴西购物网站:Submarino
2020/01/19 全球购物
倡议书格式范文
2014/04/14 职场文书
“三支一扶”支教教师思想汇报
2014/09/13 职场文书
高二学年自我鉴定范文(2篇)
2014/09/26 职场文书
一年级数学下册复习计划
2015/01/17 职场文书
委托书的样本
2015/01/28 职场文书
培训通知书模板
2015/04/17 职场文书
MySQL 不等于的三种使用及区别
2021/06/03 MySQL
Python Django获取URL中的数据详解
2021/11/01 Python