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 相关文章推荐
JavaScript 指导方针
Apr 05 Javascript
JavaScript与C# Windows应用程序交互方法
Jun 29 Javascript
img标签中onerror用法
Aug 13 Javascript
javaScript 利用闭包模拟对象的私有属性
Dec 29 Javascript
vue如何集成raphael.js中国地图的方法示例
Aug 15 Javascript
Three.js利用性能插件stats实现性能监听的方法
Sep 25 Javascript
vue中实现左右联动的效果
Jun 22 Javascript
解决Vue 项目打包后favicon无法正常显示的问题
Sep 01 Javascript
解决vue的 v-for 循环中图片加载路径问题
Sep 03 Javascript
学习node.js 断言的使用详解
Mar 18 Javascript
原生JS实现烟花效果
Mar 10 Javascript
微信小程序个人中心的列表控件实现代码
Apr 26 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取得一个类的属性和方法的实现代码
2011/05/22 PHP
浅谈PHP解析URL函数parse_url和parse_str
2014/11/11 PHP
PHP实现找出链表中环的入口节点
2018/01/16 PHP
laravel按天、按小时,查询数据的实例
2019/10/09 PHP
Laravel框架集合用法实例浅析
2020/05/14 PHP
Mootools 1.2教程 输入过滤第二部分(字符串)
2009/09/15 Javascript
Jquery常用技巧收集整理篇
2010/11/14 Javascript
一个简单的全屏图片上下打开显示网页效果示例
2014/07/08 Javascript
node.js中的path.sep方法使用说明
2014/12/08 Javascript
JQuery使用index方法获取Jquery对象数组下标的方法
2015/05/18 Javascript
js实现C#的StringBuilder效果完整实例
2015/12/22 Javascript
javascript插件开发的一些感想和心得
2016/02/28 Javascript
轻松掌握JavaScript享元模式
2016/08/27 Javascript
JavaScript实现弹窗效果代码分析
2017/03/09 Javascript
bootstrap警告框示例代码分享
2017/05/17 Javascript
详解vue前后台数据交互vue-resource文档
2017/07/19 Javascript
vue-cli如何引入bootstrap工具的方法
2017/10/19 Javascript
Vue服务器渲染Nuxt学习笔记
2018/01/31 Javascript
使用ngrok+express解决本地环境中微信接口调试问题
2018/02/26 Javascript
python发送邮件示例(支持中文邮件标题)
2014/02/16 Python
Python找出最小的K个数实例代码
2018/01/04 Python
mac下pycharm设置python版本的图文教程
2018/06/13 Python
python 列表转为字典的两个小方法(小结)
2019/06/28 Python
python celery分布式任务队列的使用详解
2019/07/08 Python
最新PyCharm 2020.2.3永久激活码(亲测有效)
2020/11/26 Python
python字典按照value排序方法
2020/12/28 Python
html5教程实现Photoshop渐变色效果
2013/12/04 HTML / CSS
基督教卡片、励志礼品、家居装饰等:DaySpring
2018/10/12 全球购物
Perfume’s Club德国官网:在线购买香水
2019/04/08 全球购物
Final类有什么特点
2012/04/25 面试题
作文批改评语大全
2014/04/23 职场文书
2014全年工作总结
2014/11/27 职场文书
客服专员岗位职责
2015/02/10 职场文书
公司晚会主持词
2019/04/17 职场文书
2019员工保密协议书(3篇)
2019/09/23 职场文书
navicat 连接Ubuntu虚拟机的mysql的操作方法
2022/04/02 MySQL