赞
踩
页面
首先需要在表单配置model、ref、rules,el-form-item中放prop
<el-form :model="form" label-width="0" ref="formRef" :rules="rules"> <el-form-item label="" prop="username"> <el-input v-model="form.username" :prefix-icon="User" /> </el-form-item> <el-form-item label="" prop="password"> <el-input v-model="form.password" :prefix-icon="Lock" show-password /> </el-form-item> <el-form-item label=""> <el-button class="loginBtn" type="primary" :loading="btnLoading" @click="loginClick" > 登录 </el-button> </el-form-item> </el-form>
script
let form = reactive({ username: 'admin', password: '111111', }) const formRef = ref() const btnLoading = ref(false) const rules = { username: [ { required: true, message: '请输入账号', trigger: 'blur' }, { min: 5, message: '账号不能少于五位', trigger: 'blur' }, ], password: [ { required: true, message: '请输入密码', trigger: 'blur' }, { min: 5, message: '密码不能少于五位', trigger: 'blur' }, ], } const loginClick = () => { formRef.value.validate(async (valid: any, fields: any) => { if (valid) { btnLoading.value = true try { await userStore.userLogin(form) // 接口 btnLoading.value = false ElNotification({ title: `${tool.getTimeType()}好`, message: '登录成功', }) await router.push('/') } catch (error) { btnLoading.value = false ElNotification({ title: '登录失败', message: (error as Error).message, }) } } else { btnLoading.value = false console.log('error submit!', fields) } }) }
看着简单,少一点休想校验 (ˉ▽ˉ;)…
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。