vue3——登录校验

页面

首先需要在表单配置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)
    }
  })
}

看着简单，少一点休想校验 (ˉ▽ˉ；)...