el-from el-from-item 表单 表单验证 表单预校验

先用el-from包裹，e-lform 里面有子项 el-from-item，每一个表单就一个子项el-from-item

ref是引用对象，可以配置重置等方法，:model数据绑定，:rules验证规则

子项 用v-model="loginForm.username"绑定数据

<!-- ref是引用对象，可以配置重置等方法，:model数据绑定，:rules验证规则 -->
      <el-form ref="loginFormRef"
               :model="loginForm"
               :rules="loginFormRules"
               label-width="0px"
               class="login_from">
        <!-- 用户名 -->
        <el-form-item prop="username">
          <el-input v-model="loginForm.username"
                    prefix-icon="iconfont icon-user"></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item prop="password">
          <el-input v-model="loginForm.password"
                    prefix-icon="iconfont icon-3702mima"
                    type="password"></el-input>
        </el-form-item>
        <!-- 按钮 -->
        <el-form-item class="btns">
          <el-button type="primary"
                     @click="login">登录</el-button>
          <el-button type="info"
                     @click="resetLoginForm">重置</el-button>
        </el-form-item>
      </el-form>

数据，以及表单验证规则

export default {
  data () {
    return {
      // 这是登录表单的数据绑定对象
      loginForm: {
        username: 'admin',
        password: '123456'
      },
      // 这是表单的验证规则对象
      loginFormRules: {
        // 验证用户名是否合法
        username: [
          { required: true, message: '请输入登录名', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        // 验证密码是否合
        password: [
          { required: true, message: '请输入登录密码', trigger: 'blur' },
          { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
        ]
      }
    }
  },

表单预校验，点击登录，表单不合格放回false，并且停止运行，if里面要true才运行，所以取反

login () {
    validate里面是个回调函数，valid是布尔值，表单合格valid就是true
    
      this.$refs.loginFormRef.validate(async valid => {
        if (!valid) return urll

合格就发送请求什么的啦