Vue 后台管理项目4-登录页表单验证

登录页表单验证

1.登录页表单验证

Ⅰ.在饿了吗Form表单组件下，找到表单验证示例

Form 组件提供了表单验证的功能，并将 Form-Item 的 prop 属性设置为需校验的字段名即可

NO.	描述
1	在data里添加表单验证规则，字段名要与formDate内的一致
2	表单标签el-form添加rules 属性 :rules="rules"传入约定的验证规则
3	el-form-item选项标签添加prop 属性 prop="username/password"，设置为需校验的字段名即可
4	表单标签el-form添加ref 属性ref="formData"，用来给dom元素起名字
注意	ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例

<template>
  <div id="app">
    <!-- 3.再用一个大盒子包裹,控制登录框大小和位置 -->
    <div class="form-container">
      <h2>用户登录</h2>
      <!-- 1.通过设置 label-position 属性可以改变表单域标签的位置，可选值为 top、left，当设为 top 时标签会置于表单域的顶部 -->
      <!-- 2.将一些默认formLabelAlign、name、region等名称改掉 -->
      <!-- ref是vue提供的属性,让我们可以给dom元素起名字 -->
      <el-form label-position="top" label-width="80px" :model="formData" :rules="rules" ref="formData">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="formData.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <!-- 密码输入框增加属性type="password"就可以变成密文 -->
          <el-input v-model="formData.password" type="password"></el-input>
        </el-form-item>
        <el-button class="login-btn" type="success" @click="submitForm('formData')">登录</el-button>
      </el-form>
    </div>
  </div>
</template>

<script>
// 这里的formData、username、password都要跟上面的html代码对应
export default {
  name: "app",
  data() {
    return {
      formData: {
        username: "",
        password: "",
      },
      //添加表单验证规则,名称要与formDate内的一致
      rules: {
          username: [
            //required:必须
            //message:提示信息
            //trigger:触发时机,blur输入框失去焦点触发,change输入框内容改变就触发
            //min:最短  max:最长
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 6, message: '密码长度输入有误', trigger: 'blur' }
          ]
        }
    };
  },
  //方法
  methods: {
    submitForm(formData){
      //$refs数组,可以让我们通过设定的名字获取对应的dom元素
      //通过表单元素的validate(饿了吗提供)方法进行登录验证
      this.$refs[formData].validate((valid) => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    }
  }
};
</script>

<style lang="scss">
//  删除默认样式,重新编写 
#app {
  height: 100%;
  background-color: #324152;
  display: flex;
  justify-content: center;
  align-items: center;
  .form-container {
    background-color: #fff;
    width: 500px;
    padding: 40px;
    box-sizing: border-box;
    border-radius: 10px;
    .login-btn {
      width: 100%;
    } 
  }
}


</style>

Ⅱ.更新代码(备注:完成登录页表单验证)到github上
注意:如果提交到ssh地址不行，可以用https地址git push https://github.com/baojunGit/manage-project.git dev

Ⅲ.添加axios插件
如何写Vue插件，传送门https://cn.vuejs.org/v2/guide/plugins.html

NO.	步骤描述
1	安装axios指令cnpm i axios --save
2	在src下新建一个lib文件，新增vue-axios.js文件，在vue-axios.js内写插件
3	在main.js中全局导入axios指令import axios from 'axios'
4	设置基地址http://localhost:8888/api/private/v1/
5	将写好的插件暴露出去

image

2.登录页路由抽取

NO.	路由抽取步骤
1	安装vue-router指令cnpm install vue-router --save
2	在src下lib文件，新增router.js文件，在router.js内写路由
3	在components文件下，新增组件，后面写路由的时候对应起来
4	在main.js中全局导入路由指令import router from'./lib/router'
5	挂载到最顶级的Vue实例上
6	在App.vue设置路由出口，路由匹配到的组件将渲染在这里

image

image

本文同步发表在我的个人博客：https://www.lubaojun.com/