<template>
    <!--
      el-form
        :label-position="labelPosition" 设置label的位置
        :model 用来给表单设置数据模型（对象）
        :rules 用来设置表单验证规则的
        ref 用来引用当前的表单组件

      el-form-item
            prop  它是modle对象中的一个属性，当使用表单验证，或者表单重置的时候，必须使用该属性

     -->

      <el-form :label-position="labelPosition" :model="loginForm" :rules="rules" ref="loginForm"  class="demo-loginForm"   >
             <el-form-item label="用户名:" prop="username">
                  <el-input v-model="loginForm.username"></el-input>
             </el-form-item>


             <el-form-item label="密　码:" prop="password">
                  <el-input v-model="loginForm.password" type="password"></el-input>
            </el-form-item>
  
      <el-form-item>
            <el-button type="primary" @click="submitForm">登录</el-button>
            <el-button @click="resetForm">重置</el-button>
      </el-form-item>

      </el-form>
      
</template>

<script>
import { constants } from 'crypto';
  export default {
    data() {
      return {    
        labelPosition: 'right',
        loginForm: {
              username:"",
              password:""
        },
        rules: {
          username: [
                // required  是否为必填项， trigger:表单验证的触发时机，失去焦点进行验证
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { min: 3, max: 6, message: '用户名长度在 3 到 6 个字符', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输密码', trigger: 'blur' },
            { min: 3, max: 6, message: '密码长度在 3 到 6 个字符', trigger: 'blur' }
          ],

        }
      };
    },
    methods: {
      submitForm() {
            // ref 用在组件中，就表示当前组件  通过 $refs.xxx可以拿到所有ref的集合
            // this.$refs.loginForm  //当前的表单对象
       this.$refs.loginForm.validate((valid) => {
          if (valid) { //valid成功为ture，失败为false
                //发送请求 ，调用登录接口  
                console.log(this.loginForm)    
            alert('submit!');
          } else {
            console.log('校验失败');
            return false;
          }
        });
      },
      resetForm(formName) {//表单重置
        this.$refs.loginForm.resetFields();
      }
    }
  }
</script>

<style scoped>

</style>