Vue 两个字段联合校验之修改密码功能的实现

目录
  • 1、前言
  • 2、方案实现
    • 2.1、实现代码
    • 2.2、代码说明
    • 2.3、校验效果

1、前言

  本文是前文《Vue Element-ui表单校验规则,你掌握了哪些?》针对多字段联合校验的典型应用。

  在修改密码时,一般需要确认两次密码一致,涉及2个属性字段。类似的涉及2个属性字段的情况有:

  • 日期时间范围,如果两者都有值,则要求:结束时间>=开始时间。
  • 数量关系:数量下限<=数量上限。

  特点是两个属性值都是可变的。本文以校验两次密码的一致性应用,给出两个可变属性值的字段之间的联合校验的典型解决方案。

2、方案实现

2.1、实现代码

  先给出表单的代码:

<template>
  <div id="contentwrapper">
    <h5 class="heading" align=left>用户管理 / 修改密码</h5>
    <!-- 分隔线 -->
    <el-divider></el-divider>
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
      <el-form-item label="原 密 码:" prop="oldPasswd">
        <el-input v-model="form.oldPasswd" :type="password">
          <!-- input中加图标必须要有slot="suffix"属性,不然无法显示图标 -->
          <i slot="suffix" :class="icon" @click="showPassword"></i>
        </el-input>
      </el-form-item>
      <el-form-item label="新 密 码:" prop="newPasswd">
        <el-input v-model="form.newPasswd" :type="password">
          <i slot="suffix" :class="icon" @click="showPassword"></i>
        </el-input>
      </el-form-item>
      <el-form-item label="确认密码:" prop="confirmPasswd">
        <el-input v-model="form.confirmPasswd" :type="password">
          <i slot="suffix" :class="icon" @click="showPassword"></i>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" style="width:160px" size="small" @click="submit()">确定</el-button>
        <el-button type="primary" style="width:160px" size="small" @click="cancel()">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
  import {passwordValidator} from '@/common/validator.js'
  export default {
    data() {
      // 比较两次密码是否相同
      const comparePasswdValidator = (rule, value, callback) =>{
        // 获取获取值的方法
        var getvaluesMethod = rule.getValuesMethod;
        // 调用getvaluesMethod方法,获取对象值
        var formData = getvaluesMethod();

        // 有一个为空,可能还没有输入值,此时不比较
        if (formData.newPasswd == '' || formData.confirmPasswd == ''){
          return callback();
        }

        // ===========================================================
        // 比较两次密码

        // 两个都有值,比较
        if (formData.newPasswd == formData.confirmPasswd){
          // 新密码与确认密码一致
          // 先清除两个密码的校验告警提示,目前是清除另一个密码的不一致的提示
          this.$refs['form'].clearValidate(['newPasswd','confirmPasswd']);
          callback();
        }else{
          callback(new Error('两次密码不一致'));
        }
      }

      return {
        form : {
          oldPasswd : '',
          newPasswd : '',
          confirmPasswd : ''
        },
        //用于改变Input类型
        password:"password",
        //用于更换Input中的图标
        icon:"el-input__icon el-icon-view",
        // 校验规则配置
        rules: {
          oldPasswd : [
            {required: true, message: "密码不能为空", trigger: 'blur'}
          ],
          newPasswd : [
            {required: true, message: "新密码不能为空", trigger: 'blur'},
            {min: 6, max: 18, message: "新密码6-18位", trigger: 'blur'},
            {validator: passwordValidator, trigger: 'blur'},
            {validator: comparePasswdValidator,trigger: 'blur','getValuesMethod':this.getValuesMethod},
          ],
          confirmPasswd : [
            {required: true, message: "确认密码不能为空", trigger: 'blur'},
            {min: 6, max: 18, message: "确认密码6-18位", trigger: 'blur'},
            {validator: passwordValidator, trigger: 'blur'},
            {validator: comparePasswdValidator,trigger: 'blur','getValuesMethod':this.getValuesMethod},
          ],
        },
      }
    },
    methods: {
      // 获取值的方法,为所有需要多字段联合校验的校验器使用
      getValuesMethod(){
        return this.form;
      },

      // 密码的隐藏和显示
      showPassword(){
        //点击图标是密码隐藏或显示
        if( this.password=="text"){
            this.password="password";
            //更换图标
            this.icon="el-input__icon el-icon-view";
        }else {
            this.password="text";
            this.icon="el-input__icon el-icon-stopwatch";
        }
      },

      // 提交
      submit(){
        let _this = this;
        this.$refs['form'].validate(valid => {
          // 验证通过为true,有一个不通过就是false
          if (valid) {
            _this.instance.changePasswd(_this.$baseUrl,_this.form).then(res => {
              if (res.data.code == _this.global.SucessRequstCode){
                // 提示修改成功
                alert("重新设置密码已成功!");
                // 跳转到首页
                this.$router.push({
                  path: '/home',
                });
              }else{
                if (!_this.commonFuncs.isInterceptorCode(res.data.code)){
                  alert(res.data.message);
                }
              }
            }).catch(error => {
              console.log(error);
            });
          }
        })
      },

      // 取消
      cancel(){
        // 跳转到首页
        this.$router.push({
          path: '/home',
        });
      }
    }
  }
</script>  

  导入的外部校验器passwordValidator在/src/common/validator.js文件中,代码如下:

/* 密码校验 */
export function passwordValidator(rule, value, callback) {
  const reg =/^[_a-zA-Z0-9@.#%&*!\-\$^]+$/;
  if(value == '' || value == undefined || value == null){
    callback();
  } else {
    if (!reg.test(value)){
      callback(new Error('密码由英文字母、数字以及下列字符组成:@.#%&*!_-$^'));
    } else {
      callback();
    }
  }
}

2.2、代码说明

2.2.1、规则配置:

  // 校验规则配置
    rules: {
      oldPasswd : [
        {required: true, message: "密码不能为空", trigger: 'blur'}
      ],
      newPasswd : [
        {required: true, message: "新密码不能为空", trigger: 'blur'},
        {min: 6, max: 18, message: "新密码6-18位", trigger: 'blur'},
        {validator: passwordValidator, trigger: 'blur'},
        {validator: comparePasswdValidator,trigger: 'blur','getValuesMethod':this.getValuesMethod},
      ],
      confirmPasswd : [
        {required: true, message: "确认密码不能为空", trigger: 'blur'},
        {min: 6, max: 18, message: "确认密码6-18位", trigger: 'blur'},
        {validator: passwordValidator, trigger: 'blur'},
        {validator: comparePasswdValidator,trigger: 'blur','getValuesMethod':this.getValuesMethod},
      ],
    },        

  重点是newPasswd和confirmPasswd属性,两个配置了相同的规则集,校验规则都为:

  • 值不能为空。
  • 长度为6-18位。
  • 符合密码校验器passwordValidator的规则,即密码由英文字母、数字以及下列字符组成:@.#%&*!_-$^。
  • 比较密码校验器comparePasswdValidator,这个校验器添加了一个自定义属性getValuesMethod,属性值为this的getValuesMethod方法,注意是方法,不是方法名。该条规则,要求methods中有一个getValuesMethod方法,并且实现comparePasswdValidator校验器。

  这些规则一起作用,所有规则都通过校验,属性校验才通过,并且检测次序按照数组的先后次序执行。

  校验规则中,newPasswd和confirmPasswd属性,都配置相同的comparePasswdValidator,是因为两个字段属性值都是可变的。comparePasswdValidator排在规则的最后一条,即需要先满足前面的校验规则。

2.2.2、getValuesMethod方法

// 获取值的方法,为所有需要多字段联合校验的校验器使用
  getValuesMethod(){
    return this.form;
  },

  getValuesMethod方法,返回data中form数据对象。这是一个很犀利的操作,相当于提供了全局的数据探针,可以在校验器中访问data的form数据对象,并且由于form的v-modal模型,确保数据的实时性,即无需担心获取不到其它属性的最新取值。getValuesMethod方法,提供了数据绑定的另类思路。

2.2.3、comparePasswdValidator校验器

  // 比较两次密码是否相同
  const comparePasswdValidator = (rule, value, callback) =>{
    // 获取获取值的方法
    var getvaluesMethod = rule.getValuesMethod;
    // 调用getvaluesMethod方法,获取对象值
    var formData = getvaluesMethod();

    // 有一个为空,可能还没有输入值,此时不比较
    if (formData.newPasswd == '' || formData.confirmPasswd == ''){
      return callback();
    }

    // ===========================================================
    // 比较两次密码

    // 两个都有值,比较
    if (formData.newPasswd == formData.confirmPasswd){
      // 新密码与确认密码一致
      // 先清除两个密码的校验告警提示,目前是清除另一个密码的不一致的提示
      this.$refs['form'].clearValidate(['newPasswd','confirmPasswd']);
      callback();
    }else{
      callback(new Error('两次密码不一致'));
    }
  }

  因为配置的自定义规则属性'getValuesMethod'是一个指向this.getValuesMethod的方法,因此该属性可以看作方法来调用:

 // 获取获取值的方法
    var getvaluesMethod = rule.getValuesMethod;
    // 调用getvaluesMethod方法,获取对象值
    var formData = getvaluesMethod();

  方法属性的调用结果,返回了指向this.form的数据对象,于是就可以随意访问该对象的属性。

  在比较两者之前,如果发现有一者为空,则返回。因为当前属性输入值之后,对端属性可能还没有输入值,此时不应该比较。

// 有一个为空,可能还没有输入值,此时不比较
    if (formData.newPasswd == '' || formData.confirmPasswd == ''){
      return callback();
    }

  两次密码比较:

  // ===========================================================
    // 比较两次密码

    // 两个都有值,比较
    if (formData.newPasswd == formData.confirmPasswd){
      // 新密码与确认密码一致
      // 先清除两个密码的校验告警提示,目前是清除另一个密码的不一致的提示
      this.$refs['form'].clearValidate(['newPasswd','confirmPasswd']);
      callback();
    }else{
      callback(new Error('两次密码不一致'));
    }

  两次密码比较,如果两个密码一致,就输出告警提示。如果一致,则需要先清除对端的告警提示,因为此时对端可能有”两次密码不一致“的提示。

// 先清除两个密码的校验告警提示,目前是清除另一个密码的不一致的提示
      this.$refs['form'].clearValidate(['newPasswd','confirmPasswd']);

  clearValidate方法,是element-form的方法,作用是清除一个或多个校验规则属性的异常提示。

  这时,是否会发生”误杀“情况呢?即清除操作将对端的其它异常提示也清除了。考虑到此时两次密码相同,且两者校验规则是相同的,由于此校验规则排在最后,从检测次序来说,是最后执行的,也就是说,执行到本校验器时,其它校验都通过了。因此,这种”误杀“的情况不会发生。实际执行效果也是如此。

  另外,需要注意的,此时不能用下列代码代替上面clearValidate调用语句:

  // 执行对端的校验
          if (rule.field == 'newPasswd')
          {
            // 如果当前属性为newPasswd
            this.$refs['form'].validateField('confirmPasswd');
          }else{
            this.$refs['form'].validateField('newPasswd');
          }

  因为,此时正在执行校验,再调用对端校验,会导致对端调用comparePasswdValidator,而对端校验结果发现两次密码一致,将再次调用对端(对端的对端,即本身)校验,于是死循环了,导致调用堆栈溢出。因此,校验器代码中,尽量不要再调用validateField方法。

2.3、校验效果

  下面是一些效果图:

  初始状态:

  修改确认密码,离开输入焦点:

  进入新密码输入框,不输入,离开输入焦点:

  修改确认密码,删除尾部的字符"8",离开输入焦点,此时又回到了初始状态。

到此这篇关于Vue 两个字段联合校验典型例子--修改密码的文章就介绍到这了,更多相关Vue修改密码内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • vue-cli3 取消eslint校验代码的解决办法

    在网上找了各种办法都没解决,看了下文档就解决了关闭vue-cli3.0 报错:eslint-disable-next-line to ignore the next line. 注意我这里是VUE3.0 解决方法: 找到文件vue.config.js (备注我这里是vue-cli3.0)打开文件 修改lintOnSave 为false,如果没有就添加lintOnSave 为false 下图: 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们.

  • Vue Element校验validate的实例

    官方文档 限制输入指定类型 添加type限制即可,type包括以下值: 例子: rules: { bannerType: [ { required: true, message: '请选择类型', trigger: 'change'} ], associateId: [ { required: true, message: '请选择公告', trigger: 'change'} ], associateData: [ { required: true, type: 'url', message:

  • vue实现个人信息查看和密码修改功能

    下面一段代码给大家介绍vue实现个人信息查看和密码修改功能,具体代码如下所述: //用了element组件,自己要加载和引入 <template> <div class="all-container"> <div class="all-container-padding bg" > <el-tabs v-model="activeName" @tab-click="handleClick&quo

  • vue实现手机号码的校验实例代码(防抖函数的应用场景)

    前言 上一篇博文我们讲到了节流函数的应用场景,我们知道了节流函数可以用在模糊查询.scroller.onresize等场景:今天这篇我们来讲防抖函数的应用场景:: 通过上一篇博文的学习,我们知道了防抖函数的原理:只有在事件触发的时候才会延迟加载,如果在延迟加载之前再次触发,则会刷新延迟时间重新延迟,触发次数有且只有触发一次: 如果对防抖函数原理有疑惑,请点击链接跳转到关于防抖函数讲解的博文:https://www.jb51.net/article/169350.htm 防抖函数一般是用于频繁触发

  • Vue中常用rules校验规则(实例代码)

    在 vue开发中,难免遇到各种表单校验,这里整理了网络上和自己平时高频率用到的一些校验方法.如果错误欢迎指出,后期不断补充更新. 1.是否合法IP地址 export function validateIP(rule, value,callback) { if(value==''||value==undefined||value==null){ callback(); }else { const reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|

  • vue input标签通用指令校验的实现

    移动端通常对于input标签要求输入有一些校验,vue的指令可达到完美校验的作用 预期效果 <input v-model="times" :data-last_value="lastTimes" v-int v-max="8" v-min="2" /> 属性data-last_value的值用来缓存用户输入框上一次失去焦点后输入的值,lastTimes是初始化的变量,后续不会再随意更改此值, v-model一定不要

  • Vue 两个字段联合校验之修改密码功能的实现

    目录 1.前言 2.方案实现 2.1.实现代码 2.2.代码说明 2.3.校验效果 1.前言   本文是前文<Vue Element-ui表单校验规则,你掌握了哪些?>针对多字段联合校验的典型应用.   在修改密码时,一般需要确认两次密码一致,涉及2个属性字段.类似的涉及2个属性字段的情况有: 日期时间范围,如果两者都有值,则要求:结束时间>=开始时间. 数量关系:数量下限<=数量上限.   特点是两个属性值都是可变的.本文以校验两次密码的一致性应用,给出两个可变属性值的字段之间的

  • vue两个输入框联动校验方式(最大值-最小值)

    目录 vue两个输入框联动校验 vue表单中范围两个输入框共用一个验证 vue两个输入框联动校验 如下图, 1.满足最大值和最小值的输入要求[1-100的整数] 2.满足最小值不能大于等于最大值 3.当最小值有报红校验,改正最大值使得最大值大于最小值,最小值的报红校验消失 html代码 最大值: <el-input v-model="restoreForm.maxrate" placeholder="请输入" style="margin-left:5

  • AngularJS前端页面操作之用户修改密码功能示例

    本文实例讲述了AngularJS前端页面操作之用户修改密码功能.分享给大家供大家参考,具体如下: 最近在做前端设计,主要使用的知识有AngularJS和nodejs来进行页面显示和数据请求.处理等工作.在设计页面比如忘记密码时,发现一个有效的设计思路是很重要的. 就以修改密码为例,要将提示信息友好的展示给用户,明确告诉用户在操作的过程中那部分有问题,这需要定义详细的变量以及能在页面的不同位置显示信息.下面的代码是自己写的一个简单例子,记录学习进程. changePwd var app = ang

  • postgresql数据添加两个字段联合唯一的操作

    我就废话不多说了,大家还是直接看代码吧~ alter table tb_safety_commitment add constraint uk_mac_vendor unique (company_code,promise_date); 补充:一行数据中的 多字段值根据连接符拼接 concat_ws(':',a,b) 几行数据中的 同一 单字段值根据连接符拼接 string_agg(c,' \r\n ') 如果要将多个字段的值拼接成一个: string_agg(concat_ws(':',a,b

  • flask框架实现修改密码和免密登录功能

    修改密码功能 数据库部分: #重置密码 def reset_pass(phone,password): conn,cursor=get_conn() sql="update userdata set userpass='"+password+"' where userphone='"+phone+"'" try: print("正在修改密码...") resetflag=cursor.execute(sql) conn.com

  • vue两个组件间值的传递或修改方式

    1.可以用公共的父组件来实现: 2.可以在store.js里面在设置公共变量: 3.也可以用本地存储localStorage.setItem()和localStorage.getItem(),通过修改本地存储的值和获取修改后的值来实现: 4.就是父子组件间的值的传递与修改props,这里需要注意的是子组件里面不      能直接修改props里面接受的值,需要定义一个中间变量来接受props里的值并修改,通过$emit即this.$emit('checkDisplay',this.display

  • Laravel Validator 实现两个或多个字段联合索引唯一

    Laravel的Validation还是蛮好用的,使用Validator可以非常方便的验证表单,它提供了unique唯一性验证,但是默认只能验证一个字段,那遇到两个甚至多个字段的联合索引,需要满足复杂条件唯一性怎么实现呢 Validator复杂唯一性实现方法 我们可以用自定义 Rule 自定义验证规则,比如像这样: [...] $where = [ 'name' => $request->name, 'phone' => $request->phone ]; $this->v

  • Vue 通过公共字段,拼接两个对象数组的实例

    前端需要展示两个字段,工资项与工资值.因为后台数据原因,后端是将这两个数据分开返回,这边我需要将这两个数组拼接到一个数据. 直接上代码. 1.HTML部分 <html lang="zh"> <head> <meta charset="UTF-8"> <title>工资查询</title> <link rel="stylesheet" href="https://unpkg

  • vue实现两个组件之间数据共享和修改操作

    我们在使用vue开发过程中会遇到这样的情况,在父组件中引入了子组件,需要将父组件的值传到子组件中显示,同时子组件还可以更改父组件的值. 以我目前的一个项目的开发为例,如下图页面: 在父组件中,我引入了两个子组件,一个是左边的导航栏,还有中间的一个富文本编译器组件,当我点击左边导航栏时,中间的页面会切换,也就是改变引入的子组件. 怎么实现呢,首先,设置在该页面index.vue中设置一个变量index,左边导航栏每一项也对应一个index值,导航菜单绑定select函数,@select="hand

  • 只有两个字段用一个sql语句查询出某个学生的姓名、成绩以及在表中的排名

    昨天去面试时遇到一个这样的问题: 有一张成绩表,只有两个字段,姓名和成绩.怎样用一个sql语句查询出某个学生的姓名,成绩以及在表中的排名? 一时间我也想不出具体实现,我就提了两种思路:一种是通过join关联一个查询出他排名的sql语句:一种是通过group by来实现. 回答得连自己都觉得有点心虚.请问大家如何实现呢? 假设:表名字为Course,两个字段分别为name和score 实现语句: SELECT 学生,成绩, (SELECT COUNT(*) FROM 表 WHERE a.成绩<=成

随机推荐