vue 验证两次输入的密码是否一致的方法示例

 更新时间:2020年09月29日 09:20:25   作者:webxEJIr  
这篇文章主要介绍了vue 验证两次输入的密码是否一致的方法示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

好记性不如烂笔头。总也记不住

<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 输入密码验证内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue+element使用动态加载路由方式实现三级菜单页面显示的操作

    vue+element使用动态加载路由方式实现三级菜单页面显示的操作

    这篇文章主要介绍了vue+element使用动态加载路由方式实现三级菜单页面显示的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • antd upload上传组件如何获取服务端返回数据

    antd upload上传组件如何获取服务端返回数据

    这篇文章主要介绍了antd upload上传组件如何获取服务端返回数据问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-02-02
  • 详解vue之mixin的使用

    详解vue之mixin的使用

    这篇文章主要为大家介绍了vue之mixin的使用,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2021-11-11
  • 在vue中实现echarts随窗体变化

    在vue中实现echarts随窗体变化

    这篇文章主要介绍了在vue中实现echarts随窗体变化,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • vue+ElementUI实现订单页动态添加产品数据效果实例代码

    vue+ElementUI实现订单页动态添加产品数据效果实例代码

    本篇文章主要介绍了vue+ElementUI实现订单页动态添加产品效果实例代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07
  • vue3中的ref()详解

    vue3中的ref()详解

    ref对象可以通过.value属性进行修改,修改后的值也是响应式的,并且修改后会触发相关的副作用,这篇文章主要介绍了vue3中的ref(),需要的朋友可以参考下
    2023-05-05
  • vue页面锁屏的完美解决方法记录

    vue页面锁屏的完美解决方法记录

    锁屏是指用户暂时离开时点击锁屏,用户无法跳转到其他页面,回来输入密码点击解锁,下面这篇文章主要给大家介绍了关于vue页面锁屏的完美解决方法,需要的朋友可以参考下
    2022-06-06
  • vue实现拖动左侧导航栏变大变小

    vue实现拖动左侧导航栏变大变小

    这篇文章主要为大家详细介绍了vue实现拖动左侧导航栏变大变小,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • 一文带你了解vue3.0响应式

    一文带你了解vue3.0响应式

    Vue3.0相比较于之前的版本更快、更小、更易于维护、更贴近原生、对开发者更友好,本文就Vue3.0进行详细介绍,需要了解的小伙伴可以参考一下这篇文章
    2021-09-09
  • VueJs路由跳转——vue-router的使用详解

    VueJs路由跳转——vue-router的使用详解

    本篇文章主要介绍了VueJs路由跳转——vue-router的使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-01-01

最新评论