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 EasyUI 对话框的使用方法
Oct 24 Javascript
Js动态添加复选框Checkbox的实例方法
Apr 08 Javascript
提取jquery的ready()方法单独使用示例
Mar 25 Javascript
JS原型、原型链深入理解
Feb 27 Javascript
使用JavaScript为Kindeditor自定义按钮增加Audio标签
Mar 18 Javascript
图文详解Heap Sort堆排序算法及JavaScript的代码实现
May 04 Javascript
简单理解vue中Props属性
Oct 27 Javascript
解决vue里碰到 $refs 的问题的方法
Jul 13 Javascript
最新Javascript程序员面试试题和解题方法
Nov 23 Javascript
面包屑导航详解
Dec 07 Javascript
快速解决vue-cli在ie9+中无效的问题
Sep 04 Javascript
前端vue+elementUI如何实现记住密码功能
Sep 20 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/29 PHP
PHP逐行输出(ob_flush与flush的组合)
2012/02/04 PHP
php页面跳转代码 输入网址跳转到你定义的页面
2013/03/28 PHP
php中addslashes函数与sql防注入
2014/11/17 PHP
关于PHP文件的自动运行方法分析
2016/05/13 PHP
php日期操作技巧小结
2016/06/25 PHP
HTML 自动伸缩的表格Table js实现
2009/04/01 Javascript
autoIMG 基于jquery的图片自适应插件代码
2011/03/12 Javascript
js获取height和width的方法说明
2013/01/06 Javascript
js控制表单奇偶行样式的简单方法
2013/07/31 Javascript
jquery 判断滚动条到达了底部和顶端的方法
2014/04/02 Javascript
JS实现的简单鼠标跟随DiV层效果完整实例
2015/10/31 Javascript
AngularJs  Understanding Angular Templates
2016/09/02 Javascript
基于javascript实现数字英文验证码
2017/01/25 Javascript
解决AjaxFileupload 上传时会出现连接重置的问题
2017/07/07 Javascript
vue-resource调用promise取数据方式详解
2017/07/21 Javascript
动态创建Angular组件实现popup弹窗功能
2017/09/15 Javascript
深入剖析Node.js cluster模块
2018/05/23 Javascript
webpack4.x开发环境配置详解
2018/08/04 Javascript
VUE解决 v-html不能触发点击事件的问题
2019/10/28 Javascript
使用vuex存储用户信息到localStorage的实例
2019/11/11 Javascript
[02:32]DOTA2亚洲邀请赛 VG战队巡礼
2015/02/03 DOTA
Python自定义简单图轴简单实例
2018/01/08 Python
python的pandas工具包,保存.csv文件时不要表头的实例
2018/06/14 Python
Python抓包程序mitmproxy安装和使用过程图解
2020/03/02 Python
Python matplotlib修改默认字体的操作
2020/03/05 Python
Python+redis通过限流保护高并发系统
2020/04/15 Python
python中numpy.empty()函数实例讲解
2021/02/05 Python
LocalStorage记住用户和密码功能
2017/07/24 HTML / CSS
加拿大在线眼镜零售商:SmartBuyGlasses加拿大
2019/05/25 全球购物
机械专业毕业生推荐信范文
2013/11/25 职场文书
汽车维修专业毕业生的求职信分享
2013/12/04 职场文书
员工考核评语大全
2014/04/26 职场文书
软件售后服务方案
2014/05/29 职场文书
一般党员对照检查材料
2014/09/24 职场文书
小学中队长竞选稿
2015/11/20 职场文书