vite基础学习笔记：6.Element使用（Form表单）-登录界面

说明：自学做的笔记记录，如有错误请指正

1. 安装 Element Plus

参考Element Plus组件库官网，输入指令pnpm i element-plus安装

2.引入并安装Element Plus插件

在入口文件main.ts引入并安装

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

app.use(ElementPlus);

3.Form表单

3.1 模板代码

参考官网说明中的Form表单

参考代码进行修改：

<template>
    <div class="login">
        <p class="title">登录界面</p>
        <div class="top">
            <el-form :model="loginParam" :rules="rules" ref="form">
                <el-form-item label="手机号" prop="phone">
                    <el-input placeholder="请输入11位手机号" v-model="loginParam.phone"></el-input>
                </el-form-item>
                <el-form-item label="验证码" prop="code">
                    <el-input placeholder="请输入4位验证码" v-model="loginParam.code"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-checkbox label="记住账号"></el-checkbox>
                </el-form-item>
            </el-form>
        </div>
        <div class="bottom">
            <el-button type="primary" @click="Login">登录</el-button>
        </div>
    </div>
</template>

<style scoped lang="scss">
.login {
    .title{
        font-size: 20px;
        color:black;
        text-align: center;
        margin: 0 0 30px 0;
        z-index: 999;
    };
    border-radius: 8px;
    padding: 20px 80px;
    position: absolute;
    top: 35%;
    left: 35%;
    border: 1px solid #ccc;

    width: 500px;
    height: auto;
    color:#fff;
    font-size: 20px;
    font-weight: 60;
    padding: 25px;

    display: flex;
    flex-direction: column;
    align-items: center;
}
</style>

界面显示如下：

3.2 自定义校验规则

参考官网代码修改：

<script setup lang="ts">
// 自定义校验规则：手机号码自定义校验规则
const validatorPhone = (rule: any, value: any, callBack: any) => {
    // rule 表单校验的规则对象  value：当前文本的内容  callback：回调函数
    const reg = /^1((34[0-8])|(8\d{2})|(([35][0-35-9]|4[579]|66|7[35678]|9[1389])\d{1}))\d{7}$/;
    if (reg.test(value)) {
        callBack();
    } else {
        callBack(new Error('请输入正确的手机号格式'));
    }
};
// 自定义校验规则：验证码自定义校验规则
const validatorCode = (rule: any, value: any, callBack: any) => {
    // rule 表单校验的规则对象  value：当前文本的内容  callback：回调函数
    if (/^\d{6}$/.test(value)) {
        callBack();
    } else {
        callBack(new Error('请输入正确的验证码格式'));
    }
};
// 获取form组件实例
let form = ref<any>();
const rules = {
    phone: [{ trigger: 'change', validator: validatorPhone }],
    code: [{ trigger: 'change', validator: validatorCode }]
};
</script>

界面显示如下；

3.3 问题处理：Form表单校验成功后才能点击登录按钮调用登录接口

<script setup lang="ts">
import { reactive,ref } from 'vue';
import { ElMessage } from "element-plus";
import { reqLogin } from '../../api/index';
const loginParam = reactive({
    phone: "",
    code: "",
});
const Login = async () => {
    await form.value.validate();
    try {
        await reqLogin(loginParam);
    }catch(error){
        ElMessage({
            type: "error",
            message: (error as Error).message
        })
    }
};
// 自定义校验规则：手机号码自定义校验规则
const validatorPhone = (rule: any, value: any, callBack: any) => {
    // rule 表单校验的规则对象  value：当前文本的内容  callback：回调函数
    const reg = /^1((34[0-8])|(8\d{2})|(([35][0-35-9]|4[579]|66|7[35678]|9[1389])\d{1}))\d{7}$/;
    if (reg.test(value)) {
        callBack();
    } else {
        callBack(new Error('请输入正确的手机号格式'));
    }
};
// 自定义校验规则：验证码自定义校验规则
const validatorCode = (rule: any, value: any, callBack: any) => {
    // rule 表单校验的规则对象  value：当前文本的内容  callback：回调函数
    if (/^\d{6}$/.test(value)) {
        callBack();
    } else {
        callBack(new Error('请输入正确的验证码格式'));
    }
};
// 获取form组件实例
let form = ref<any>();
const rules = {
    phone: [{ trigger: 'change', validator: validatorPhone }],
    code: [{ trigger: 'change', validator: validatorCode }]
};
</script>

4. 登录成功后跳转至另一页面

import { useRouter } from "vue-router";
let $router = useRouter();

const Login = async () => {
    await form.value.validate();
    try {
        await reqLogin(loginParam);
        // 跳转到另一页面
        $router.push({ path:'/one'});
    }catch(error){
        ElMessage({
            type: "error",
            message: (error as Error).message
        })
    }
};