【无标题】注册页+vue

/* el-row表示一行，一行分成24分
el-col表示列
（1）:span=“12” 代表在一行中占用12分，也就是网页的一半
（2）:span=“6” 表示在一行中，占6份
（3）:span=“3” 代表在一行中，左侧margin份数：离左侧有多少

   el-form 整个表单组件
   el-form-item 表单的一行
   h1、el-input 表单元素(标题，输入框)

   :prefix-icon=""   element-plus的图标

   【需求】注册页面基本校验

1. 用户名非空，长度校验5-10位
2. 密码非空，长度校验6-15位
3. 再次输入密码，非空，长度校验6-15位

【进阶】再次输入密码需要自定义校验规则，和密码框值一致（可选）

注意：

form标签：
1.:model=“对象”
2.:rules=“规则对象名”
imput处：
3.v-model=“对象.接口变量”
每一个填写的form-item处:
4.prop=“规则名”

13小点总结： ak47
按照官网所写，一个表单数据绑定一个变量(name)，
如果出现多个数据这么写会非常麻烦，
所以把他们方到同一个对象中，
这些变量名都需要看接口文档，以便后期提交

将来 :model=“对象名” + v-model=“对象名.变量”

24小店总结：
:rules=‘规则对象名’ 和 prop=“规则名” 对应

规则写法：
const 规则对象名 ={
规则名：[{ 未输入时的规则 },{ 输入后的规则 }]
}
提示：密码属性patten,值是正则/*\S{开始，结束}$/

自定义校验（常用于再次输入密码）：官网有
一个属性加在上面的规则对象里：validitor:(rule,value,callback)=>{写函数}

密码的话通常函数是 是否 语句
*/

<el-col :span="6" :offset="3" class="form">
  <el-form  :model="userFrom" :rules="rules" ref="form" size="large" autocomplete="off" v-if="isRegister">
    <el-form-item>
      <h1>注册</h1>
    </el-form-item>
    <el-form-item prop="username">
      <el-input v-model="userFrom.username" :prefix-icon="User" placeholder="请输入用户名"></el-input>
    </el-form-item>
    <el-form-item prop="password">
      <el-input
        v-model="password"
        :prefix-icon="Lock"
        type="password"
        placeholder="请输入密码"
      ></el-input>
    </el-form-item>
    <el-form-item prop="repassword">
      <el-input
      :rules="repassword"
        :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" autocomplete="off" v-else>
    <el-form-item>
      <h1>登录</h1>
    </el-form-item>
    <el-form-item>
      <el-input :prefix-icon="User" placeholder="请输入用户名"></el-input>
    </el-form-item>
    <el-form-item>
      <el-input
        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>