登录页面form表单

海鸥两三2026-01-20 8:17
登录页面form表单
html 复制代码
<template>
  <div class="login-container">
    <div class="login-box">
      <el-form ref="ruleFormRef" :model="form" :rules="rules">
        <el-form-item prop="username">
          <el-input v-model="form.username" :clearable="true" maxlength="11" placeholder="手机号/邮箱"></el-input>

        </el-form-item>

        <el-form-item prop="password">
          <el-input v-model="form.password" :clearable="true" min="6" type="password" style="margin-top: 20px"
                    placeholder="密码"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button @click="loginFun(ruleFormRef)" type="primary" class="btn">登录</el-button>
        </el-form-item>

      </el-form>

    </div>
  </div>
</template>

<script setup lang="js">
import {reactive, ref} from "vue";

const form = ref({
  username: "",
  password: "",
})

const ruleFormRef = ref()
const rules = reactive({
  username: [
    {required: true, message: '请输入用户名', trigger: 'blur'},
    {min: 3, max: 11, message: '非法输入！', trigger: 'blur'},
  ],
  password: [
    {required: true, message: '请输入密码', trigger: 'blur'},
    {max: 16, message: '非法输入', trigger: 'blur'},
  ]
})

const loginFun = async (formEl) => {

  if (!formEl) return
  
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
    } else {
      console.log('error submit!', fields)
    }
  })

}
</script>

<style scoped lang="scss">
.login-container {
  width: 100%;
  height: 100%;
  background-image: url("@/assets/image/index/clearBackground.png");
  text-align: center;
  background-size: 100% 100%;
  user-select: none;
  display: flex;
  justify-content: center;
  align-items: center;

  .login-box {
    width: 400px;
    height: 200px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 10px;
    /* box-shadow: 水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内外阴影；*/
    box-shadow: 2px 2px 5px 2px rgba(168, 168, 168, 0.4);
    border: 1px solid silver;
    padding: 30px 20px;

    .btn {
      width: 100%;
      margin-top: 30px;
      height: 38px;
    }

  }


}
</style>