一、Element-Plus 表单

1.结构相关

el-row表示一行，一行分成24份

  el-col 表示列

（1）:span="12"  代表在一行中，占12份（50%）

（2）:span="6"  代表在一行中，占6份（25%）

（3）:offset="3"  代表在一行中，左侧margin份数

el-form  整个表单组件

el-form-item 表单的一行（一个表单域）

el-input 表单元素（输入框）

<el-row class="login-page">
    <el-col :span="12" class="bg"></el-col>
    <el-col :span="6" :offset="3" class="form">
      <el-form
        ref="form"
        size="large"
        autocomplete="off"
        v-if="isRegister"
        :rules="rules"
        :model="formModel"
      >
        <el-form-item>
          <h1>注册</h1>
        </el-form-item>
        <el-form-item prop="username">
          <el-input
            v-model="formModel.username"
            :prefix-icon="User"
            placeholder="请输入用户名"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            :prefix-icon="Lock"
            v-model="formModel.password"
            type="password"
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            :prefix-icon="Lock"
            type="password"
            placeholder="请再次输入密码"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button class="button" type="primary" auto-insert-space>
            注册
          </el-button>
        </el-form-item>
        <el-form-item class="flex">
          <el-link type="info" :underline="false" @click="isRegister = false">
            ← 返回
          </el-link>
        </el-form-item>
      </el-form>
      <el-form
        ref="form"
        size="large"
        :rules="rules"
        :model="formModel"
        autocomplete="off"
        v-else
      >
        <el-form-item>
          <h1>登录</h1>
        </el-form-item>
        <el-form-item prop="username">
          <el-input
            v-model="formModel.username"
            :prefix-icon="User"
            placeholder="请输入用户名"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            v-model="formModel.password"
            name="password"
            :prefix-icon="Lock"
            type="password"
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>
        <el-form-item class="flex">
          <div class="flex">
            <el-checkbox>记住我</el-checkbox>
            <el-link type="primary" :underline="false">忘记密码？</el-link>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button class="button" type="primary" auto-insert-space
            >登录</el-button
          >
        </el-form-item>
        <el-form-item class="flex">
          <el-link type="info" :underline="false" @click="isRegister = true">
            注册 →
          </el-link>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>

2.校验相关

（1）el-form => :model="formModel"  绑定的整个form的数据对象

（2）el-form => :rules="rules"             绑定的整个rules规则对象

（3）表单元素 el-input => v-model="formModel.XXX"  给表单元素绑定formModel的子属性

（4）el-form-item => prop配饰生效的是哪个校验规则（要和rules中的字段要对应）

（5）校验规则中，required代表不为空 ，trigger代表触发条件,blur是失去焦点，change是变化就会触发，pattern是配置正则规则，min和max是最小最大字符数

3.自定义校验

自定义校验 => 自己写逻辑校验（校验函数）

validator:（rule,value,callback）

（1）rule 当前校验规则相关的信息

（2）value 所校验的表单元素目前的表单值

（3）callback 无论成功还是失败，都需要callback回调

          -  callback（）校验成功

          -  callback（new Error（错误信息））校验失败