03-elementPlus表单

主要记录一下elementPlus表单相关的问题

表单校验

注意

1. 需要 :rules="rules"

2. 需要加上prop="account"

3. 需要ref="registerFormRef"

<template>
    <el-button type="primary" @click="dialogRegisterVisible = true">注册</el-button>

    <el-dialog v-model="dialogRegisterVisible"  title="用户注册" width="500">
        <el-form :model="registerForm" :rules="rules" ref="registerFormRef">
            <el-form-item label="账号" label-width="60px" prop="account">
                <el-input v-model="registerForm.account" autocomplete="off" clearable/>
            </el-form-item>
            <el-form-item label="密码" label-width="60px">
                <el-input v-model="registerForm.password" type="password" clearable autocomplete="off"/>
            </el-form-item>
            <el-form-item label="邮箱" label-width="60px">
                <el-input v-model="registerForm.email" clearable autocomplete="off"/>
            </el-form-item>

        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogRegisterVisible = false">取消</el-button>
                <el-button type="primary" @click="registerUser()">
                    注册
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
    import {reactive, ref} from 'vue'
    import {getCurrentInstance} from 'vue'

    const app = getCurrentInstance()
    let dialogRegisterVisible = ref(false)
    const registerForm = reactive({
        account: '',
        password: '',
        email: '',
    })
    const rules = {
        account: [
            {required: true, message: '账号必填', trigger: 'blur'},
            { min: 5, max: 10, message: '账号必须是5-10位字符', trigger: 'blur' }
        ],
        password: [
            {
              pattern: /^\S{6,15}$/,
              message: '密码必须是6-15位非空字符',
              trigger: 'blur'
            }
          ]
    }

    function registerUser() {
      app.proxy.$refs.registerFormRef.validate((valid) => {
        if (valid) {
          // 业务逻辑
        }
      });
    }

</script>