Vue登录页

1. 创建login.vue文件

// @/pages/login.vue
<el-form ref="formRef" :rules="rules" :model="form">
  <el-form-item prop="username">
    <el-input v-model="form.username" placeholder="请输入用户名">
    </el-input>
  </el-form-item>
  <el-form-item prop="password">
    <el-input v-model="form.password" type="password" show-password placeholder="请输入密码">
    </el-input>
  </el-form-item>
</el-form>

<script setup>
import { User, Lock } from "@element-plus/icons-vue";
import { reactive, ref } from "vue";

// do not use same name with ref
const form = reactive({
  username: "",
  password: "",
});

const rules = {
  // required: true 必填项
  // trigger: "blur" 失去焦点触发
  username: [
    {
      required: true,
      message: "用户名不能为空",
      trigger: "blur",
    }
  ],
  password: [
  {
      required: true,
      message: "密码不能为空",
      trigger: "blur",
    }
  ],
};

// 通过ref转换为响应式
const formRef = ref(null)


const onSubmit = () => {
    formRef.value.validate((valid)=>{
        if(!valid){
            console.log("验证不通过");
            return false
        }
        console.log("验证通过");
    })
};
</script>