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"&服务器托管网gt;
              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)
    }
  })
}

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

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net

相关推荐: 日志架构演进：从集中式到分布式的Kubernetes日志策略

当我们没有使用云原生方案部署应用时采用的日志方案往往是 ELK 技术栈。 这套技术方案比较成熟，稳定性也很高，所以几乎成为了当时的标配。 可是随着我们使用 kubernetes 步入云原生的时代后， kubernetes 把以往的操作系统上的许多底层都屏蔽，再…