vue3项目之el-form 的使用方法

el-form 的使用方法

• HTML 部分

<el-form
    status-icon
    ref="ruleFormRef"
    :rules="rules"
    :model="formData"
    :label-position="labelPosition"
>

ref 属性：让 ruleFormRef 变量指代整个表单

rules 属性：表单校验规则 rules

model 属性：表单数据对象 formData

label-position 属性：label 标签位置

<!-- 手机号 -->
<el-form-item :label="t('login.mobile')" prop="mobile">
    <el-input 
        :placeholder="t('login.placeMobile')"
        v-model="formData.mobile" 
    />
</el-form-item>

<!-- 按钮 -->
<el-form-item>
    <el-button 
        class="submit" type="primary" @click="submitForm(ruleFormRef)" 
        v-if="loginSignCheck == 'login'" 
    >
        {{ t('login.loginBtn') }}
    </el-button>
</el-form-item>

label 属性：label 标签文字

prop 属性：表单校验规则 rules.mobile

v-model 属性：表单数据对象 formData.mobile

submitForm(ruleFormRef)：点击按钮函数，传入 el-from 表单变量

• 数据部分

// 表单数据
const labelPosition = ref('top')
const ruleFormRef = ref<FormInstance>() // 整个表单
const formData = reactive({
    mobile: '',
    password: '',
})


// 表单效验规则
const rules = reactive({
    mobile: [
        {
            min: 11,
            max: 11,
            required: true,
            pattern: /^1[34578]\d{9}$/,
            message: '',
            trigger: 'blur'
        }
    ],
    password: [
        {
            pattern: /^[\w]{6,16}$/, // 弱密码
            required: true,
            message: '',
            trigger: 'blur'
        }
    ]
})

• 函数校验部分

模板：formEl：el-from 表单变量 valid：校验成功返回 true

async function submitForm(formEl: FormInstance | undefined) {
    if (!formEl) return

    formEl.validate(async function(valid) {
        if(!valid) {
            ElMessage.error('请填入正确信息')
            return false
        }

    	...(校验成功之后的代码)

实例：

async function submitForm(formEl: FormInstance | undefined) {
    if (!formEl) return

    formEl.validate(async function(valid) {
        if(!valid) {
            ElMessage.error('请填入正确信息')
            return false
        }

        if (loginSignCheck.value == 'sign') {
            let result = await userSignApi(formData)

            if (result.code == '000001') ElMessage.error('手机号已被注册')
            if (result.code == '000004') ElMessage.error('注册失败')
            if (result.code == '000000') {
                ElMessage({
                    message: '注册成功',
                    type: 'success',
                    duration: 1000
                })
            }
        }
        
        if (loginSignCheck.value == 'login') {
            let result = await userLoginApi(formData)

            if (result.code == '000002') ElMessage.error('密码不正确')
            if (result.code == '000003') ElMessage.error('手机号不正确')
            if (result.code == '000004') ElMessage.error('登录失败')
            if (result.code == '000000') {
                // 将全局的 userStatus 设置为1
                store.commit('changeUserState', 1)

                ElMessage({
                    message: '登录成功',
                    type: 'success',
                    duration: 1000
                })

                // 跳转路由
                setTimeout(() => { router.replace({ name: 'home' }) }, 500)
            }
        }

    })
}