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代码
Apr 23 Javascript
ext 同步和异步示例代码
Sep 18 Javascript
关于捕获用户何时点击window.onbeforeunload的取消事件
Mar 06 Javascript
jqGrid jQuery 表格插件测试代码
Aug 23 Javascript
jquery 操作DOM的基本用法分享
Apr 05 Javascript
Extjs单独定义各组件的实例代码
Jun 25 Javascript
JavaScript中的常见问题解决方法(乱码,IE缓存,代理)
Nov 28 Javascript
基于javascript的COOkie的操作实现只能点一次
Dec 26 Javascript
基于jQuery实现带动画效果超炫酷的弹出对话框(附源码下载)
Feb 22 Javascript
使用JQuery实现智能表单验证功能
Mar 08 Javascript
AngularJS表单验证功能
Oct 19 Javascript
在axios中使用params传参的时候传入数组的方法
Sep 25 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-fpm的两种进程管理模式详解
2013/06/03 PHP
php中的boolean(布尔)类型详解
2013/10/28 PHP
PHP常用技术文之文件操作和目录操作总结
2014/09/27 PHP
浅谈php提交form表单
2015/07/01 PHP
微信公众号实现会员卡领取功能
2017/06/08 PHP
翻译整理的jQuery使用查询手册
2007/03/07 Javascript
jquery cookie插件代码类
2009/05/26 Javascript
js实现图片放大缩小功能后进行复杂排序的方法
2012/11/08 Javascript
Javascript核心读书有感之词法结构
2015/02/01 Javascript
深入理解jQuery 事件处理
2016/06/14 Javascript
AngularJS HTML DOM详解及示例代码
2016/08/17 Javascript
详解JS对象封装的常用方式
2016/12/30 Javascript
页面点击小红心js实现代码
2018/05/26 Javascript
如何在微信小程序中使用骨架屏的步骤
2020/06/12 Javascript
vue 使用饿了么UI仿写teambition的筛选功能
2021/03/01 Vue.js
Python文件操作类操作实例详解
2014/07/11 Python
python使用calendar输出指定年份全年日历的方法
2015/04/04 Python
Python生成随机验证码的两种方法
2015/12/22 Python
Python中的groupby分组功能的实例代码
2018/07/11 Python
tensorflow 用矩阵运算替换for循环 用tf.tile而不写for的方法
2018/07/27 Python
解决Python pandas plot输出图形中显示中文乱码问题
2018/12/12 Python
python交互模式下输入换行/输入多行命令的方法
2019/07/02 Python
python虚拟环境完美部署教程
2019/08/06 Python
Pytorch卷积层手动初始化权值的实例
2019/08/17 Python
Python selenium抓取虎牙短视频代码实例
2020/03/02 Python
python 中不同包 类 方法 之间的调用详解
2020/03/09 Python
HTML5实现动画效果的方式汇总
2016/02/29 HTML / CSS
白俄罗斯女装和针织品网上商店:Presli.by
2019/10/13 全球购物
毕业研究生的自我鉴定
2013/11/30 职场文书
四风存在的原因分析
2014/02/11 职场文书
学校师德师风自我剖析材料
2014/09/29 职场文书
2014年检验科工作总结
2014/11/22 职场文书
德能勤绩工作总结
2015/08/11 职场文书
《我要的是葫芦》教学反思
2016/02/18 职场文书
2019升学宴主持词范本5篇
2019/10/09 职场文书
nginx网站服务如何配置防盗链(推荐)
2021/03/31 Servers