03. 开发登录功能

22 字约 1 分钟读完1974 次阅读更新于 2026/5/3

写页面

学会引用组件

  import { reactive } from "vue";
  import { User } from "@element-plus/icons-vue";

表单校验怎么做

<el-form :model="data.form"  ref="formRef" :rules="data.rules">

rules: {
  username: [
    { required: true, message: '请输入账号', trigger: 'blur' },
  ],
    password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
  ],
}

formRef.value.validate((valid => {
  console.log(valid)

})).catch(error => {
  console.error(error)
})

form表单

<el-form :model="data.form"  ref="formRef" :rules="data.rules">
  <el-form-item prop="username">
    <el-input :prefix-icon="User" size="large" v-model="data.form.username" placeholder="请输入账号" />
  </el-form-item>
  <el-form-item prop="password">
    <el-input :prefix-icon="Lock" size="large" v-model="data.form.password" placeholder="请输入密码" show-password />
  </el-form-item>
  <el-form-item>
    <el-button size="large" type="primary" style="width: 100%" @click="login">登 录</el-button>
  </el-form-item>
</el-form>