【原创】vue-element-admin-plus完成确认密码功能，并实时获取Form中表单字段中的值

前言

我第一句就想说：vue-element-admin-plus真是个大坑货！就一个确认密码功能都值得我单开一页博客来讲这么一个简单的功能

布局和代码

布局如图所示，我需要密码和确认密码，确认密码需要和密码中的内容一致，不然会返回出错，不让提交

schema中的内容：

javascript 复制代码

  {
    field: 'password',
    label: '密码',
    component: 'InputPassword'
  },
  {
    field: 'confirmPassword',
    label: '确认密码',
    component: 'InputPassword'
  }

rules中的内容：

javascript 复制代码

  password: [
    {
      validator: (_, value) => {
        if (isBlank(value)) {
          return true
        }
        if (value.length < 6) {
          return new Error('密码至少6位')
        }
        return true
      }
    }
  ],
  confirmPassword: [
    {
      validator: (_, value) => {
        const password = props.currentRow?.password
        console.log('password', password)
        if (password && password.length > 0) {
          if (!value) {
            return new Error('请确认密码')
          }
          if (value !== password) {
            return new Error('两次输入的密码不一致')
          }
        } else {
          return true
        }
      }
    }
  ]

结果发现这个rules中的判断根本不起作用！打印password后才发现其值一直是undefined，根本不会刷新它的值！

解决方法

方案一：Form中取值法

这就需要研究vue-element-admin-plus中的Form.vue了，其中的formModel让我非常感兴趣，好像就是其表单自己

其定义为：

javascript 复制代码

    // 表单数据
    const formModel = ref<Recordable>(props.model)

且model的代码注释为：表单数据对象

这样问题就很明了了，我直接取它不就行了！

定义formRef，并在<Form>中也加上这个ref

TypeScript 复制代码

const formRef = ref<typeof Form>()

<Form :rules="rules" @register="formRegister" :schema="schema" ref="formRef" />

修改password值的来源，改为直接从formRef中取

将const password = props.currentRow?.password改为：

TypeScript 复制代码

const password = formRef.value?.formModel.password

通过Console就能发现这里去到的就是当前密码输入框中的值，而不是undefined。

方案二：定义值法

这个应该是最简单解决这个问题的方法，就是再定义一个变量，取接收输入框内实时的值，然后去和confirmPassword中的值进行比较

定义一个变量：

TypeScript 复制代码

const inputPassword = ref<string>('')

在rules中的password中给这个变量赋值

TypeScript 复制代码

  password: [
    {
      validator: (_, value) => {
        if (isBlank(value)) {
          return true
        }
        inputPassword.value = value
        if (value.length < 6) {
          return new Error('密码至少6位')
        }
        return true
      }
    }
  ],

然后将confirmPassword中的将const password = props.currentRow?.password改为：

TypeScript 复制代码

const password = inputPassword.value

这样也能获取到password的值，并完成判断。

结语

对于两种方案来说，我强烈推荐方案一，因为这个方案获取到的值更加实时，且你终于可以将Form这个二次封装的el-form的组件玩弄于股掌之间了，后面想怎么改，怎么获取都不成问题了。

赋值方法：

TypeScript 复制代码

        if (formRef.value) {
          formRef.value.formModel.confirmPassword = '123456'
        }

后面可以将Form.vue嵌入到各种其他页面中，到时候通过ref获取表单值即可，终于不再被Write.vue所限制了