<script setup lang='ts'>
const form = reactive({
  // oldPwd: '',
  newPwd: '',
  confirmPwd: '',
})

const rules = {
  newPwd: [
    { required: true, message: '请输入新密码', trigger: 'blur' },
    // 字母数字结合，最少设置8个字符，包含字母大小写 和数字特殊符号（所有密码通用设置）
    {
      validator: (rule: any, value: any, callback: any) => {
        if (!/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{8,20}$/.test(value))
          callback(new Error('密码必须包含大小写字母和数字'))
        else
          callback()
      },
      trigger: 'blur',
    },
  ],
  confirmPwd: [
    { required: true, message: '请再次输入新密码', trigger: 'blur' },
    {
      validator: (rule: any, value: any, callback: any) => {
        if (value !== form.newPwd)
          callback(new Error('两次输入密码不一致!'))
        else
          callback()
      },
      trigger: 'blur',
    },
  ],
}

function repwd() {
  console.log(form)
}
</script>

<template>
  <el-form :rules="rules" :model="form">
    <!-- <el-form-item label="旧密码">
      <el-input v-model="form.oldPwd" type="password" />
    </el-form-item> -->
    <el-form-item label="新密码">
      <el-input v-model="form.newPwd" type="password" />
    </el-form-item>
    <el-form-item label="确认密码">
      <el-input v-model="form.confirmPwd" type="password" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="repwd">
        重置密码
      </el-button>
    </el-form-item>
  </el-form>
</template>
