1 07.登录表单验证处理

接上篇，我们登录界面已经完成了，但是用户登录输入的账户密码需要做一些验证，也是减少和后端的交互

• 例如： 登录表单验证

  • prop 关联验证字段

  • rules 验证规则

  • ref 反向

// login.vue


...略

<el-form ref="formRef" :rules="rules" :model="form" class="w-[250px]">
    <el-form-item prop="username">
        <el-input v-model="form.username" placeholder="请输入用户名">
            <template #prefix>
                <el-icon><User /></el-icon>
            </template>
        </el-input>
    </el-form-item>
    <el-form-item prop="password">
        <el-input type="password" v-model="form.password" placeholder="请输入用户密码" show-password>
            <template #prefix>
                <el-icon><Lock /></el-icon>
            </template>
        </el-input>
    </el-form-item>
    <el-form-item>
        <el-button round color="#626aef" class="w-[250px] round" type="primary" @click="onSubmit">登录</el-button>
    </el-form-item>
</el-form>


...略


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

// do not use same name with ref
const form = reactive({
  username: '',
  password: '',

})

// 定义验证规则
const rules = {
    username: [
        {
            required: true,
            message: '用户名不能为空',
            trigger: 'blur',
        },
    ],
    password: [
        {
            required: true,
            message: '密码不能为空',
            trigger: 'blur',
        },
    ]
}

// 点击登录验证
const formRef = ref(null)

const onSubmit = () => {
    formRef.value.validate((valid) => {
        if (!valid) {
            console.log('error')
        }
        console.log(valid)
    })
}
</script>

...略