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 相关文章推荐
jquery 模拟类搜索框自动完成搜索提示功能(改进)
May 24 Javascript
jcrop基本参数一览
Jul 16 Javascript
js实现特定位取反原理及示例
Jun 30 Javascript
AngularJS定时器的使用与移除操作方法【interval与timeout】
Dec 14 Javascript
JavaScript和JQuery获取DIV值的方法示例
Mar 07 Javascript
vuex的使用及持久化state的方式详解
Jan 23 Javascript
Angular网络请求的封装方法
May 22 Javascript
mpvue中使用flyjs全局拦截的实现代码
Sep 13 Javascript
详解VScode编辑器vue环境搭建所遇问题解决方案
Apr 26 Javascript
vue 引用自定义ttf、otf、在线字体的方法
May 09 Javascript
vue本地打开build后生成的dist文件夹index.html问题
Sep 04 Javascript
利用 Chrome Dev Tools 进行页面性能分析的步骤说明(前端性能优化)
Feb 24 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文章内容分页并生成相应的htm静态页面代码
2010/06/07 PHP
php实现按指定大小等比缩放生成上传图片缩略图的方法
2014/12/15 PHP
php查询mysql大量数据造成内存不足的解决方法
2015/03/04 PHP
javascript 文章截取部分无损html显示实现代码
2010/05/04 Javascript
JavaScript中获取元素索引的函数
2010/09/10 Javascript
有关JavaScript的10个怪癖和秘密分享
2011/08/28 Javascript
js获取TreeView控件选中节点的Text和Value值的方法
2012/11/24 Javascript
JS实现悬浮移动窗口(悬浮广告)的特效
2013/03/12 Javascript
js里取容器大小、定位、距离等属性搜集整理
2013/08/19 Javascript
Js 导出table内容到Excel的简单实例
2013/11/19 Javascript
实例讲解避免javascript冲突的方法
2016/01/03 Javascript
使用pcs api往免费的百度网盘上传下载文件的方法
2016/03/17 Javascript
前端学习笔记style,currentStyle,getComputedStyle的用法与区别
2016/05/28 Javascript
jquery把int类型转换成字符串类型的方法
2016/10/07 Javascript
使用smartupload组件实现jsp+jdbc上传下载文件实例解析
2017/01/05 Javascript
JS中解决谷歌浏览器记住密码输入框颜色改变功能
2017/02/13 Javascript
cordova入门基础教程及使用中遇到的一些问题总结
2017/11/14 Javascript
layui问题之模拟table表格中的选中按钮选中事件的方法
2019/09/20 Javascript
简单的Python抓taobao图片爬虫
2014/10/26 Python
python抓取网页中图片并保存到本地
2015/12/01 Python
基于Python和Scikit-Learn的机器学习探索
2017/10/16 Python
Python建立Map写Excel表实例解析
2018/01/17 Python
Python2.7 实现引入自己写的类方法
2018/04/29 Python
利用Python如何实现一个小说网站雏形
2018/11/23 Python
Python协程操作之gevent(yield阻塞,greenlet),协程实现多任务(有规律的交替协作执行)用法详解
2019/10/14 Python
python实现人机猜拳小游戏
2020/02/03 Python
css3弹性盒模型(Flexbox)详细介绍
2014/10/08 HTML / CSS
美国购买体育、音乐会和剧院门票网站:SelectATicket
2019/09/08 全球购物
如何用PHP实现邮件发送
2012/12/26 面试题
研究生自荐信
2013/10/09 职场文书
大学生村官工作感言
2014/01/10 职场文书
文明社区申报材料
2014/08/21 职场文书
小学科学教学计划
2015/01/21 职场文书
借款民事起诉状范文
2015/05/19 职场文书
Python中re模块的元字符使用小结
2022/04/07 Python
我国拿下天问一号火星着陆区附近 22 个地理实体命名:平乐、西柏坡、古田、漠河等
2022/04/29 数码科技