2.2.3 前端：页面

步骤：

步骤1：注册编写路由
步骤2：创建注册页面
步骤3：拷贝注册表单

步骤1：注册编写路由

  {
    path: '/register',
    name: '注册',
    component: () => import('../views/Register.vue')
  },

步骤2：创建注册页面

步骤3：拷贝注册表单

<template>
  <el-card class="register-card">
    <el-form ref="form" :model="user" label-width="80px" size="mini">
      <el-form-item label="用户名">
        <el-input v-model="user.username" prefix-icon="el-icon-user" placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="user.password" prefix-icon="el-icon-lock" show-password placeholder="请输入密码"></el-input>
      </el-form-item>
      <el-form-item label="确认密码">
        <el-input v-model="user.repassword" prefix-icon="el-icon-lock" show-password placeholder="请输入确认密码"></el-input>
      </el-form-item>
      <el-form-item label="生日">
        <el-date-picker type="date" placeholder="选择生日" v-model="user.birthday"></el-date-picker>
      </el-form-item>
      <el-form-item label="学历">
        <el-select v-model="user.edu" placeholder="请选择学历">
          <el-option label="大班" value="db"></el-option>
          <el-option label="中班" value="zb"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="性别">
        <el-radio-group v-model="user.gender">
          <el-radio label="1">男</el-radio>
          <el-radio label="0">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="爱好">
        <el-checkbox-group v-model="user.hobbies">
          <el-checkbox label="cy" name="type">抽烟</el-checkbox>
          <el-checkbox label="hj" name="type">喝酒</el-checkbox>
          <el-checkbox label="tt" name="type">烫头</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="婚否">
        <el-switch v-model="user.marry"></el-switch>
      </el-form-item>
      <el-form-item label="省市县">
        <el-cascader
          v-model="user.citys"
          :options="cityList"
          :props="{ expandTrigger: 'hover' }"
          ></el-cascader>
      </el-form-item>
      <el-form-item>
        <el-button type="primary">注册</el-button>
        <el-button type="info">重置</el-button>
      </el-form-item>
    </el-form>
    {{ user }}
  </el-card>
</template>
<script>
export default {
  data() {
    return {
      user: {
        hobbies: [] ,     //必须是数组
      },
      cityList: [
        {
          value: 'js',
          label: '江苏省',
          children: [
            {
              value: 'nj',
              label: '南京市',
            },
            {
              value: 'sq',
              label: '宿迁市',
              children: [
                {
                  value: 'sy',
                  label: '沭阳县',
                  children: [
                    {
                      value: 'nh',
                      label: '南湖街道',
                    },
                    {
                      value: 'mx',
                      label: '梦溪街道',
                    }
                  ]
                },
                {
                  value: 'sh',
                  label: '泗洪县',
                }
              ]
            }
          ]
        },
        {
          value: 'hb',
          label: '河北省',
        }
      ]
    }
  },
}
</script>
<style>
  .register-card {
    width: 500px;
  }
</style>

2.2.4 前端：自定义校验

步骤

步骤1：完成用户名普通校验（必填、长度3-6）
步骤2：自定义ajax用户名校验

步骤1：完成用户名普通校验（必填、长度3-6）

<template>
  <el-card class="register-card">
    <el-form ref="registerForm" :rules="registerRules" :model="user" label-width="80px" size="mini">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="user.username" prefix-icon="el-icon-user" placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="user.password" prefix-icon="el-icon-lock" show-password placeholder="请输入密码"></el-input>
      </el-form-item>
      <el-form-item label="确认密码">
        <el-input v-model="user.repassword" prefix-icon="el-icon-lock" show-password placeholder="请输入确认密码"></el-input>
      </el-form-item>
      <el-form-item label="生日">
        <el-date-picker type="date" placeholder="选择生日" v-model="user.birthday"></el-date-picker>
      </el-form-item>
      <el-form-item label="学历">
        <el-select v-model="user.edu" placeholder="请选择学历">
          <el-option label="大班" value="db"></el-option>
          <el-option label="中班" value="zb"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="性别">
        <el-radio-group v-model="user.gender">
          <el-radio label="1">男</el-radio>
          <el-radio label="0">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="爱好">
        <el-checkbox-group v-model="user.hobbies">
          <el-checkbox label="cy" name="type">抽烟</el-checkbox>
          <el-checkbox label="hj" name="type">喝酒</el-checkbox>
          <el-checkbox label="tt" name="type">烫头</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="婚否">
        <el-switch v-model="user.marry"></el-switch>
      </el-form-item>
      <el-form-item label="省市县">
        <el-cascader
          v-model="user.citys"
          :options="cityList"
          :props="{ expandTrigger: 'hover' }"
          ></el-cascader>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="register">注册</el-button>
        <el-button type="info">重置</el-button>
      </el-form-item>
    </el-form>
    {{ user }}
  </el-card>
</template>
<script>
export default {
  data() {
    return {
      user: {
        hobbies: [] ,     //必须是数组
      },
      cityList: [
        {
          value: 'js',
          label: '江苏省',
          children: [
            {
              value: 'nj',
              label: '南京市',
            },
            {
              value: 'sq',
              label: '宿迁市',
              children: [
                {
                  value: 'sy',
                  label: '沭阳县',
                  children: [
                    {
                      value: 'nh',
                      label: '南湖街道',
                    },
                    {
                      value: 'mx',
                      label: '梦溪街道',
                    }
                  ]
                },
                {
                  value: 'sh',
                  label: '泗洪县',
                }
              ]
            }
          ]
        },
        {
          value: 'hb',
          label: '河北省',
        }
      ],
      registerRules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 6, message: '长度在 3 到 6 个字符', trigger: 'blur' }
        ],
      },
    }
  },
  methods: {
    register() {
      this.$refs.registerForm.validate((valid) => {
        if (valid) {
          // 校验通过
        } else {
          // 没通过
          console.log('error submit!!');
          return false;
        }
      });
    }
  },
}
</script>
<style>
  .register-card {
    width: 500px;
  }
</style>

步骤2：自定义ajax用户名校验

<template>
  <el-card class="register-card">
    <el-form ref="registerForm" :rules="registerRules" :model="user" label-width="80px" size="mini">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="user.username" prefix-icon="el-icon-user" placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="user.password" prefix-icon="el-icon-lock" show-password placeholder="请输入密码"></el-input>
      </el-form-item>
      <el-form-item label="确认密码">
        <el-input v-model="user.repassword" prefix-icon="el-icon-lock" show-password placeholder="请输入确认密码"></el-input>
      </el-form-item>
      <el-form-item label="生日">
        <el-date-picker type="date" placeholder="选择生日" v-model="user.birthday"></el-date-picker>
      </el-form-item>
      <el-form-item label="学历">
        <el-select v-model="user.edu" placeholder="请选择学历">
          <el-option label="大班" value="db"></el-option>
          <el-option label="中班" value="zb"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="性别">
        <el-radio-group v-model="user.gender">
          <el-radio label="1">男</el-radio>
          <el-radio label="0">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="爱好">
        <el-checkbox-group v-model="user.hobbies">
          <el-checkbox label="cy" name="type">抽烟</el-checkbox>
          <el-checkbox label="hj" name="type">喝酒</el-checkbox>
          <el-checkbox label="tt" name="type">烫头</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="婚否">
        <el-switch v-model="user.marry"></el-switch>
      </el-form-item>
      <el-form-item label="省市县">
        <el-cascader
          v-model="user.citys"
          :options="cityList"
          :props="{ expandTrigger: 'hover' }"
          ></el-cascader>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="register">注册</el-button>
        <el-button type="info">重置</el-button>
      </el-form-item>
    </el-form>
    {{ user }}
  </el-card>
</template>
<script>
import axios from 'axios'
export default {
  data() {
    // 自定义校验器   var 函数名 = 箭头函数(规则,数据,回调函数)
    // 校验通过：callback();
    // 校验失败：callback(new Error('失败原因'));
    var validateUsername = async (rule, value, callback) => {
      // 1 发送ajax根据用户查询
      var url = `http://localhost:8888/user/check`
      let { data: baseResult } = await axios.post(url,{username: value})
      // 2 根据结果处理：20000通过，否则失败
      if(baseResult.code == 20000) {
        // 2.1 成功
        callback();
      } else {
        // 2.2 失败
        callback(new Error(baseResult.message));
      }
    };
    return {
      user: {
        hobbies: [] ,     //必须是数组
      },
      cityList: [
        {
          value: 'js',
          label: '江苏省',
          children: [
            {
              value: 'nj',
              label: '南京市',
            },
            {
              value: 'sq',
              label: '宿迁市',
              children: [
                {
                  value: 'sy',
                  label: '沭阳县',
                  children: [
                    {
                      value: 'nh',
                      label: '南湖街道',
                    },
                    {
                      value: 'mx',
                      label: '梦溪街道',
                    }
                  ]
                },
                {
                  value: 'sh',
                  label: '泗洪县',
                }
              ]
            }
          ]
        },
        {
          value: 'hb',
          label: '河北省',
        }
      ],
      registerRules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },         //内置校验：必填
          { min: 3, max: 6, message: '长度在 3 到 6 个字符', trigger: 'blur' }, //内置校验：长度
          { validator: validateUsername, trigger: 'blur' }                          //自定义校验：用户名校验 validateUsername
        ],
      },
    }
  },
  methods: {
    register() {
      this.$refs.registerForm.validate((valid) => {
        if (valid) {
          // 校验通过
        } else {
          // 没通过
          console.log('error submit!!');
          return false;
        }
      });
    }
  },
}
</script>
<style>
  .register-card {
    width: 500px;
  }
</style>