pc端-登录页面-登录表单的校验

• element表单校验的格式

                <el-form      绑定model 和 rulesguize

                        <el-form-item  绑定prop属性

                                <el-input   绑定v-model

2.模板配置校验规则:

// 登录表单(大致的一个样式)

<el-form ref="formDataRef" :model="formData" :rules="formDataRules">

  <el-form-item label="用户名: " prop="username">
    <el-input v-model="formData.username" />
  </el-form-item>

  <el-form-item label="密码: " prop="password">
    <el-input v-model="formData.password" />
  </el-form-item>

  <el-form-item>
    <el-button type="primary" @click="doLogin">登录</el-button>
  </el-form-item>

</el-form>

1.在data中声明校验规则:

3.处理最终校验结果:

data () {
    return {
      //表单数据
      formData:{
         username: '',
         password: ''
      },
      //校验规则
      formDataRules:{
        username:[ { required:true, message:'请输入用户名', trigger:'blur'},
                   { min:5, max:11, message:'长度在5到11个字符', trigger:'blur'} ],

        password:[ { required:true, message:'请输入密码', trigger:'blur'},
                   { min:5, max:11, message:'长度在5到11个字符', trigger:'blur'} ]
    }
},
 methods:{
    //点击登录
    doLogin () {
      //(1) 判断表单是否校验通过
      this.$refs.formDataRef.validate((valid) => {
        console.log(valid)
        if (valid) {
          //(2) 发送登录ajax
        }
    })
}

• 登录页-实现登录功能(新建 api/user.js 提供api接口函数 )

import request from '@/utils/request'

// 登录接口
export const userLogin = ({ username, password }) => {
  return request.post('/auth/login', {
    username,
    password
  })
}

• 发送请求获取token

methods: {
  async login () {
    try {
      const valid = await this.$refs.form.validate()
      if (valid) {
        const res = await login(this.form)
        console.log(res)
      }
    } catch (e) {
      console.log(e)
    }
  }
}