创建项目

引入 element-ui 组件库

登录：注册样式准备之后，配置校验规则（4个条件：一数据、二规则）

1. 校验相关
       (1) 给当前表单绑上整个的数据对象：el-form => :model="ruleForm"      绑定的整个form的数据对象 { xxx, xxx, xxx }  (<el-form-item> </el-form-item>)

<el-form:model="formModel">

const formModel = ref({username: '',password: '',repassword: ''
})

       (2) 绑上对应的校验规则：el-form => :rules="rules"         绑定的整个rules规则对象  { xxx, xxx, xxx }（注意一一对应）  (<el-form-item> </el-form-item>)

<el-form:model="formModel":rules="rules"  
>

const rules = {username: [{required: true,message: 'please',//blur:失焦触发，change：值改变的时候触发trigger: 'blur'},{min: 5,max: 10,message: 'yhum',trigger: 'blur'}],password: [{required: true,message: 'please',//blur:失焦触发，change：值改变的时候触发trigger: 'blur'},{pattern: /^\S{6,15}$/,message: '6-15'}]
}

       (3) 表单元素 => v-model="ruleForm.xxx" 给表单元素，绑定form的子属性，用户输入的内容才会同步到表单里去。（<el-input><</el-input>）

 <el-inputv-model="formModel.repassword":prefix-icon="Lock"type="password"placeholder="请输入再次密码"></el-input>

       (4) el-form-item => prop配置生效的是rules里的哪个校验规则 (和rules中的字段要对应)   (<el-form-item> </el-form-item>)

 <el-form-item prop="username"><el-inputv-model="formModel.username":prefix-icon="User"placeholder="请输入用户名"></el-input></el-form-item>

2.

（1）整个表单的校验规则

                1.非空校验 required:true message信息提示 trigger：触发校验的时机
                2.长度校验 min:xx,max:xx
                3.正则校验pattern：正则规则     \s  非空校验
                4.自定义校验 => 自己写逻辑校验（校验函数）   validator:(rule,value,callback) 

• rule   当前校验规则相关的信息
• value   所校验的表单元素目前的表单值
• callback   两种校验方式，{第一种：callback() 代表校验成功。第二种：callback(new Error(错误信息))   代表校验失败。}无论成功还是失败，都要回调     

（2）自定义校验规则

目录

创建项目

引入 element-ui 组件库

登录：注册样式准备之后，配置校验规则（4个条件）

---

 

全部代码

<script setup>
import { User, Lock } from '@element-plus/icons-vue'
import { ref } from 'vue'
const isRegister = ref(true)
//整个的用于提交的form数据对象
const formModel = ref({username: '',password: '',repassword: ''
})
//整个表单的校验规则
//1.非空校验 required:true message信息提示 trigger：触发校验的时机
//2.长度校验 min:xx,max:xx
//3.正则校验pattern：正则规则
const rules = {username: [{required: true,message: 'please',//blur:失焦触发，change：值改变的时候触发trigger: 'blur'},{min: 5,max: 10,message: 'yhum',trigger: 'blur'}],password: [{required: true,message: 'please',//blur:失焦触发，change：值改变的时候触发trigger: 'blur'},{pattern: /^\S{6,15}$/,message: '6-15'}],repassword: [{required: true,message: 'please',//blur:失焦触发，change：值改变的时候触发trigger: 'blur'},{pattern: /^\S{6,15}$/,message: '6-15'},{validator: (rule, value, callback) => {if (value !== formModel.value.password) {callback(new Error('no'))} else {callback() //校验成功，也需要正常回调 callback（）}},trigger: 'blue'}]
}
</script><template><el-row class="login-page"><el-col :span="12" class="bg"></el-col><el-col :span="6" :offset="3" class="form"><el-form:model="formModel":rulesref="form"size="large"autocomplete="off"v-if="isRegister"><el-form-item><h1>注册</h1></el-form-item><el-form-item prop="username"><el-inputv-model="formModel.username":prefix-icon="User"placeholder="请输入用户名"></el-input></el-form-item><el-form-item prop="password"><el-inputv-model="formModel.password":prefix-icon="Lock"type="password"placeholder="请输入密码"></el-input></el-form-item><el-form-item prop="repassword"><el-inputv-model="formModel.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 prop="username"><el-inputv-model="formModel.username":prefix-icon="User"placeholder="请输入用户名"></el-input></el-form-item><el-form-item><el-inputname="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>
</template><style lang="scss" scoped>
.login-page {height: 100vh;background-color: #fff;.bg {background:url('@/assets/logo2.png') no-repeat 60% center / 240px auto,url('@/assets/login_bg.jpg') no-repeat center / cover;border-radius: 0 20px 20px 0;}.form {display: flex;flex-direction: column;justify-content: center;user-select: none;.title {margin: 0 auto;}.button {width: 100%;}.flex {width: 100%;display: flex;justify-content: space-between;}}
}
</style>

注册功能

1.新建 api/user.js 封装

import request from '@/utils/request'//注册接口
export const userRegisterService = ({ username, password, repassword }) => {//return 和 {} 可以省略//return request.post('/api/reg', { username, password, repassword })request.post('/api/reg', { username, password, repassword })
}

2.页面中调用（LoginPage.vue）

const register = async () => {//注册成功之前，先进行校验。校验成功，就发请求；校验失败，自动提示//调用validate会触发校验，给用户显示错误提示await form.value.validate()await userRegisterService(formModel.value)
//调用组件ElMessage.success('success')isRegister.value = false
}

3.eslintrc 中声明全局变量名, 解决 ElMessage 报错问题

module.exports = {...globals: {ElMessage: 'readonly',ElMessageBox: 'readonly',ElLoading: 'readonly'}
}

   

切换的时候，重置表单内容，利用watch监视

        当isRegister变量发生改变时，这段代码就会运行，并清空formModel对象中的所有表单输入字段，从而重置注册表单。watch 可以让你设置一个回调函数，当被监控的数据发生变化时，这个回调函数就会被执行 
 

watch(isRegister, () => {formModel.value = {username: '',password: '',repassword: ''}})

登录：封装登录接口

//登录接口post
//不能加花括号，否则就要加return
export const userLoginService = ({ username, password }) =>request.post('/api/login', {username,password})

登录：调用方法将 token 存入 pinia 并 自动持久化本地

//调store下的user里的setToken方法
const userStore = useUserStore()
//当你调用useRouter()函数时，它会返回一个路由实例对象，你可以通过这个对象来访问和操作路由相关的功能。
//记得导入
const router = useRouter()
const login = async () => {//登录前进行预校验，没通过就不能发请求await form.value.validate()//调用接口，发送数据const res = await userLoginService(formModel.value)//把返回的res存到pinia里面去,并且自动持久化到本地userStore.setToken(res.data.token)//给出提示，登录成功ElMessage.success('success')//跳转首页router.push('/')
}