19vue-- 登录退出 实现表单的数据验证

说明：个人的学习记录

视频参考：https://www.bilibili.com/video/BV1EE411B7SU?p=19

pdemo： Happy every day！ Go!
 农历 庚子 鼠年 五月初二 -- 2020年6月22日 - 周一 -  21:03

1.vue 登录推出--实现表单数据验证
    1.1 输入框内 输入内容，当鼠标移动后，自动验证数据的有效性
    1.2 基于element-ui 内的form  表单的验证
    1.3 form 内:rules  添加这个属性，:rules="rules" ，后面的rules是验证规则对象
     -- 属性绑定 :rules="校验规则"
    1.4 校验规则对象之中 定义几个校验规则的属性
    1.5 表单item项中 添加prop="前面定义的校验规则" 

1.6 此时Login.vue内的代码  红色表示这次新增的code

<template>
    <div class="login_container">
        <div class="login_box">
            <!--  -->
            <div class="avatar_box">
                <img src="../assets/login_head.png" alt="">
            </div>
            <!-- login table place -->
            <el-form :model="loginForm" :rules="LoginFormRules" label-width="0px" class="login_form">
                <!-- 用户名输入 -->
                <el-form-item prop="username">
                    <el-input v-model="loginForm.username" prefix-icon="iconfont icon-yonghu"></el-input>
                </el-form-item>
                <!-- 密码输入 -->
                <el-form-item prop="password">
                    <el-input v-model="loginForm.password" prefix-icon="iconfont icon-mima" type="password"></el-input>
                </el-form-item>
                <!-- 按钮 登录/重置-->
                <el-form-item class="btan">
        <!-- 如下两个绿色的是多写了 ，加了绿色的话 按钮无法进行操作-->
                    <el-button type="primary" disabled>登录</el-button>
                    <el-button type="info" disabled>重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            // 这是登录表单的数据绑定对象
            loginForm: {
                // 设置默认显示未pdemo和密码未abc
                username: 'pdemo',
                password: 'abc'
            },
            // 登录输入框表单验证对象
            LoginFormRules: {
                // 用户名验证
                username: [
                { required: true, message: '请输入用户名', trigger: 'blur' },
                { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                // login password  check
                password: [
                { required: true, message: '请输入密码', trigger: 'blur' },
                { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
                ]

            }
        }
    },
}
</script>

<style lang="less" scoped>
.login_container {
    background-color:bisque;
    height: 100%;
}

.login_box {
    width: 450px;
    height: 300px;
    background-color:rgb(240, 240, 255);
    border-radius: 3px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    .avatar_box {
        height: 130px;
        width: 130px;
        border: 1px solid #eeeeee;
        border-radius: 50%;
        padding: 10px;
        box-shadow: 0 0 10px #dddddd;
        position: absolute;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: rgb(240, 240, 255);
        img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background-color: aqua;

        }
    }
}

.login_form {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}

.btan {
    display: flex;
    justify-content: flex-end;
}
</style>

2.效果：
2.1 密码未输入的时候

2.2

额外知识：
vscode 中 通过快捷键 ctrl + ？ 快速注释的时候：vue内的html注释为// 导致无法注释，
解决： sttings.json 内添加如下信息：
{
    "files.associations": {
        "*.vue": "html"
   }
}