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 相关文章推荐
类似框架的js代码
Nov 09 Javascript
JavaScript高级程序设计 阅读笔记(十四) js继承机制的实现
Aug 14 Javascript
JS实现根据当前文字选择返回被选中的文字
May 21 Javascript
JS替换字符串中字符即替换全部而不是第一个
Jun 04 Javascript
javascript基于DOM实现省市级联下拉框的方法
May 14 Javascript
jQuery实现列表内容的动态载入特效
Aug 08 Javascript
JS声明式函数与赋值式函数实例分析
Dec 13 Javascript
使用JS中的Replace()方法遇到的问题小结
Oct 20 Javascript
基于Node.js搭建hexo博客过程详解
Jun 25 Javascript
js实现拖动缓动效果
Jan 13 Javascript
node.js 微信开发之定时获取access_token
Feb 07 Javascript
JavaScript面试中常考的字符串操作方法大全(包含ES6)
May 10 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中使用Oracle数据库(3)
2006/10/09 PHP
php a simple smtp class
2007/11/26 PHP
php中批量替换文件名的实现代码
2011/07/20 PHP
PHP不用递归实现无限分级的例子分享
2014/04/18 PHP
PHP简单实现遍历目录下特定文件的方法小结
2017/05/22 PHP
Js之软键盘实现(js源码)
2007/01/30 Javascript
纯JAVASCRIPT图表动画插件Highcharts Examples
2011/04/16 Javascript
jquery中插件实现自动添加用户的具体代码
2013/11/15 Javascript
JavaScript获取网页、浏览器、屏幕高度和宽度汇总
2014/12/18 Javascript
javascript实现dom动态创建省市纵向列表菜单的方法
2015/05/14 Javascript
javascript计时器编写过程与实现方法
2016/02/29 Javascript
使用do...while的方法输入一个月中所有的周日(实例代码)
2016/07/22 Javascript
酷! 不同风格页面布局幻灯片特效js实现
2021/02/19 Javascript
Angular2中监听数据更新的方法
2018/08/31 Javascript
Vue中使用sass实现换肤功能
2018/09/07 Javascript
详解用Webpack与Babel配置ES6开发环境
2019/03/12 Javascript
ES6顶层对象、global对象实例分析
2019/06/14 Javascript
防止Layui form表单重复提交的实现方法
2019/09/10 Javascript
vue-cli3中配置alias和打包加hash值操作
2020/09/04 Javascript
JS addEventListener()和attachEvent()方法实现注册事件
2021/01/11 Javascript
浅谈MySQL中的触发器
2015/05/05 Python
python使用opencv进行人脸识别
2017/04/07 Python
Python读取Pickle文件信息并计算与当前时间间隔的方法分析
2019/01/30 Python
Python如何实现强制数据类型转换
2019/11/22 Python
python识别验证码图片实例详解
2020/02/17 Python
python+pygame实现坦克大战小游戏的示例代码(可以自定义子弹速度)
2020/08/11 Python
怎样在程序里获得一个空指针
2015/01/24 面试题
护士个人简历自荐信
2013/10/18 职场文书
好矿嫂事迹材料
2014/01/21 职场文书
主管竞聘书范文
2014/03/31 职场文书
文员转正自我鉴定怎么写
2014/09/29 职场文书
党支部群众路线整改措施思想汇报
2014/10/10 职场文书
南京大屠杀观后感
2015/06/02 职场文书
2016年学校“6﹒26国际禁毒日”宣传活动总结
2016/04/05 职场文书
HTML5之高度塌陷问题的解决
2022/06/01 HTML / CSS
Spring中bean集合注入的方法详解
2022/07/07 Java/Android