Vue3组合api中，使用elemet-plus表单自定义验证

最近项目使用vue3开发了，vue3中组合api是新增的功能，和以往的组件中的menthds、data等，写法完全不同，这里我也记录一下组合api中遇到的一些坑。

element-plus是配合vue3的UI组件，官网里，还是使用原来的组件方法，所以到了现在就需要改一下了。

首先必须引用getCurrentInstance，获得当前的实例，因为组合api中是没有this这个属性的。

    import {
        defineComponent,
        reactive,
        getCurrentInstance
        } from 'vue'

传统模式中是以this.$refs[formName]来获得表单对象的，而组合api中，先获取 ctx对象，通过ctx.$refs.loginFormRef来获得form对象。

核心代码如下：

export default defineComponent({
    name: "app",
    setup() {
			
    const formUserLogin = reactive({
        formUserLogin: {
            username: '',
            password: ''
        }
    })
    const validatePass = (rule, value, callback) => {
        if (Password.test(value)) { // 必须包含数字和大小写8-16位密码
            callback()
        } else {
            callback(new Error('密码不符合规范'))
        }
    }

    const validateName = (rule, value, callback) => {
        if (/^\d+$/.test(value)) callback(new Error('用户名不能全为数字')) 
        if (UserName.test(value)) { 
            callback()
        } else {
            callback(new Error('用户名不符合规范'))
        }
    }

    const loginRules = {
        username: [{
            validator: validateName,
            trigger: 'blur'
        }],
        password: [{
            validator: validatePass,
            trigger: 'blur'
        }]
    }

    const { // 获得实例
        ctx
    } = getCurrentInstance()

    const handleLogin = async () => {
        ctx.$refs.loginFormRef.validate((valid) => {
            if (!valid) return
            const password = md5(formUserLogin.password)
            const username = formUserLogin.username
            login(username, password)
            .then((res) => {
                .log(res)
            })
        })
    }

    const handleResetLoginFrom = () => {
        ctx.$refs.loginFormRef.resetFields()
    }

    return {
        formUserLogin,
        handleLogin,
        handleResetLoginFrom,
        loginRules,
        }
    }}）