文档：VeeValidate 支持vue3.0
第一步：安装
-
执行命令
npm i vee-validate@4.0.3
第二步：导入
-
修改文件
src/views/login/index.vue
import { Form, Field } from 'vee-validate'
第三步：定义校验规则
文件：src/utils/vee-validate-schema.js
// 定义校验规则提供给vee-validate组件使用
export default {
// 校验account
account (value) {
// value是将来使用该规则的表单元素的值
// 1. 必填
// 2. 6-20个字符，需要以字母开头
// 如何反馈校验成功还是失败，返回true才是成功，其他情况失败，返回失败原因。
if (!value) return '请输入用户名'
if (!/^[a-zA-Z]\w{5,19}$/.test(value)) return '字母开头且6-20个字符'
return true
},
password (value) {
if (!value) return '请输入密码'
if (!/^\w{6,24}$/.test(value)) return '密码是6-24个字符'
return true
},
mobile (value) {
if (!value) return '请输入手机号'
if (!/^1[3-9]\d{9}$/.test(value)) return '手机号格式错误'
return true
},
code (value) {
if (!value) return '请输入验证码'
if (!/^\d{6}$/.test(value)) return '验证码是6个数字'
return true
},
isAgree (value) {
if (!value) return '请勾选同意用户协议'
return true
}
}
提取目的 这些校验规则将来在其他表单验证时候可复用
第三步：使用 Form 组件，使用 vee-validate-schema 校验规则
vee-validate 校验基本步骤
1. 导入 Form Field 组件 将 form 和 input 进行替换， 需要加上 name用来指定将来的校验规则函数
2. Field 进行数据绑定,字段名称最好和后台接口需要一致
3. 定义 Field的 name属性指定的校验规则函数， Form的 validation-schema接收定义好的校验规则(对象)
4. 自定义组件需要校验必须先支持v-model 然后Field使用as指定为组件名称
<template>
<div class="account-box">
<div class="toggle">
<a @click="isMsgLogin=false" href="javascript:;" v-if="isMsgLogin">
<i class="iconfont icon-user"></i> 使用账号登录
</a>
<a @click="isMsgLogin=true" href="javascript:;" v-else>
<i class="iconfont icon-msg"></i> 使用短信登录
</a>
</div>
<Form ref="formCom" class="form" :validation-schema="schema" v-slot="{errors}" autocomplete="off">
<template v-if="!isMsgLogin">
<div class="form-item">
<div class="input">
<i class="iconfont icon-user"></i>
<Field :class="{error:errors.account}" v-model="form.account" name="account" type="text" placeholder="请输入用户名" />
</div>
<div class="error" v-if="errors.account"><i class="iconfont icon-warning" />{{errors.account}}</div>
</div>
<div class="form-item">
<div class="input">
<i class="iconfont icon-lock"></i>
<Field :class="{error:errors.password}" v-model="form.password" name="password" type="password" placeholder="请输入密码" />
</div>
<div class="error" v-if="errors.password"><i class="iconfont icon-warning" />{{errors.password}}</div>
</div>
</template>
<template v-else>
<div class="form-item">
<div class="input">
<i class="iconfont icon-user"></i>
<Field :class="{error:errors.password}" v-model="form.mobile" name="mobile" type="text" placeholder="请输入手机号" />
</div>
<div class="error" v-if="errors.mobile"><i class="iconfont icon-warning" />{{errors.mobile}}</div>
</div>
<div class="form-item">
<div class="input">
<i class="iconfont icon-code"></i>
<Field :class="{error:errors.code}" v-model="form.code" name="code" type="text" placeholder="请输入验证码" />
<span @click="send" class="code">
{{time===0?'发送验证码':`${time}秒后发送`}}
</span>
</div>
<div class="error" v-if="errors.code"><i class="iconfont icon-warning" />{{errors.code}}</div>
</div>
</template>
<div class="form-item">
<div class="agree">
<Field as="XtxCheckbox" name="isAgree" v-model="form.isAgree" />
<span>我已同意</span>
<a href="javascript:;">《隐私条款》</a>
<span>和</span>
<a href="javascript:;">《服务条款》</a>
</div>
<div class="error" v-if="errors.isAgree"><i class="iconfont icon-warning" />{{errors.isAgree}}</div>
</div>
<a @click="login" href="javascript:;" class="btn">登录</a>
</Form>
<div class="action">
<a href="https://graph.qq.com/oauth2.0/authorize?client_id=100556005&response_type=token&scope=all&redirect_uri=http%3A%2F%2Fwww.corho.com%3A8080%2F%23%2Flogin%2Fcallback">
<img src="https://qzonestyle.gtimg.cn/qzone/vas/opensns/res/img/Connect_logo_7.png" alt="">
</a>
<!-- <span id="qqLoginBtn"></span> -->
<div class="url">
<a href="javascript:;">忘记密码</a>
<a href="javascript:;">免费注册</a>
</div>
</div>
</div>
</template>
<script>
import { onUnmounted, reactive, ref, watch } from 'vue'
import { Form, Field } from 'vee-validate'
import schema from '@/utils/vee-validate-schema'
import Message from '@/components/library/Message'
import { userAccountLogin, userMobileLogin, userMobileLoginMsg } from '@/api/user'
import { useStore } from 'vuex'
import { useRoute, useRouter } from 'vue-router'
import { useIntervalFn } from '@vueuse/core'
// import QC from 'qc'
export default {
name: 'LoginForm',
components: {
Form,
Field
},
setup () {
// 是否短信登录
const isMsgLogin = ref(false)
// 表单信息对象
const form = reactive({
isAgree: true,
account: null,
password: null,
mobile: null,
code: null
})
// vee-validate 校验基本步骤
// 1. 导入 Form Field 组件 将 form 和 input 进行替换， 需要加上 name用来指定将来的校验规则函数
// 2. Field 进行数据绑定,字段名称最好和后台接口需要一致
// 3. 定义 Field的 name属性指定的校验规则函数， Form的 validation-schema接收定义好的校验规则(对象)
// 4. 自定义组件需要校验必须先支持v-model 然后Field使用as指定为组件名称
const mySchema = {
// 校验函数规则：返回 true就是校验成功，返回一个字符串就是失败，字符串就是错误提示
account: schema.account,
password: schema.password,
mobile: schema.mobile,
code: schema.code,
isAgree: schema.isAgree
}
// 监听 isMsgLogin 重置表单(数据+清楚校验结果)
const formCom = ref(null)
watch(isMsgLogin, () => {
form.isAgree = true
form.account = null
form.password = null
form.mobile = null
form.code = null
// 如果没有销毁Field组件(v-show)，之前校验结果是不会销毁
// Form组件提供了一个 resetForm函数清楚校验结果
// formCom.value.resetForm()
})
// setup 中获取组件实例 proxy
// const { proxy } = getCurrentInstance()
// proxy.$message({text: '11'})
// 需要在点击登录时，对整体表单进行校验
const store = useStore()
const router = useRouter()
const route = useRoute()
const login = async () => {
// Form组件提供了一个 validate 函数作为整体表单校验，返回的是一个promise
const valid = await formCom.value.validate()
// console.log(valid)
if (valid) {
try {
let data = null
if (isMsgLogin.value) {
// ** 手机号登录13666666666
// 2.1 准备一个API做手机号登录
// 2.2 调用API函数
// 2.3 成功：存储用户信息 + 跳转至来源页 | 首页 + 消息提示
// 2.4 失败：消息提示
const { mobile, code } = form
data = await userMobileLogin({ mobile, code })
} else {
// ** 账号登录
// 1. 准备一个API做账号登录
// 2. 调用API函数
// 3. 成功：存储用户信息 + 跳转至来源页 | 首页 + 消息提示
// 4. 失败：消息提示
const { account, password } = form
data = await userAccountLogin({ account, password })
// const { account, password} = form
// userAccountLogin({ account, password}).then(data => {
// // 存储用户信息
// const { id, account, avatar, mobile, nickname, token} = data.result
// store.commit('user/setUser', {id,account,avatar,mobile,nickname,token})
// // 跳转
// router.push(route.query.redirectUrl || '/')
// // 成功消息提示
// Message({type:'success', text: '登录成功'})
// }).catch(e => {
// 登录失败提示
// if (e.response.data) {
// Message({type:'error', text: e.response.data.message || '登录成功'})
// }
// })
}
// 存储用户信息
const { id, account, avatar, mobile, nickname, token } = data.result
store.commit('user/setUser', { id, account, avatar, mobile, nickname, token })
store.dispatch('cart/mergeCart').then(() => {
// 跳转
router.push(route.query.redirectUrl || '/')
// 成功消息提示
Message({ type: 'success', text: '登录成功' })
})
} catch (e) {
// 登录失败提示
if (e.response.data) {
Message({ type: 'error', text: e.response.data.message || '登录成功' })
}
}
}
}
// pasue 暂停 resume 开启
// useIntervalFn(回调, 执行间隔, 是否立即开启)
const time = ref(0)
const { pause, resume } = useIntervalFn(() => {
time.value--
if (time.value <= 0) {
pause()
}
}, 1000, { immediate: false })
onUnmounted(() => {
pause()
})
// 发送短信验证码
// 1. 发送验证码
// 1.1 绑定发送验证码按钮点击事件
// 1.2 校验手机号(成功发送——定义API & 开启60s倒计时[过程中不能点击,结束恢复], 则失败校验样式显示)
const send = async () => {
const valid = mySchema.mobile(form.mobile)
// console.log(valid) // true || '请输入手机号'
if (valid === true) {
// 通过
if (time.value === 0) {
// 没有倒计时才可以发送
await userMobileLoginMsg(form.mobile)
Message({ type: 'success', text: '发送成功' })
time.value = 60
resume()
}
} else {
// 失败，使用 vee错误函数显示错误信息 setFieldError(字段名称，错误信息)
formCom.value.setFieldError('mobile', valid)
}
}
// 初始化QQ登录按钮（官方）
// 1. 准备span有id = qqLoginBtn
// 2. QC.Login({btnId: "qqLoginBtn"})
// onMounted(() => {
// QC.Login({btnId: 'qqLoginBtn'})
// })
return { isMsgLogin, form, schema: mySchema, formCom, login, send, time }
}
}
</script>
<style lang="less" scoped>
// 账号容器
.account-box {
.toggle {
padding: 15px 40px;
text-align: right;
a {
color: @xtxColor;
i {
font-size: 14px;
}
}
}
.form {
padding: 0 40px;
&-item {
margin-bottom: 28px;
.input {
position: relative;
height: 36px;
> i {
width: 34px;
height: 34px;
background: #cfcdcd;
color: #fff;
position: absolute;
left: 1px;
top: 1px;
text-align: center;
line-height: 34px;
font-size: 18px;
}
input {
padding-left: 44px;
border: 1px solid #cfcdcd;
height: 36px;
line-height: 36px;
width: 100%;
&.error {
border-color: @priceColor;
}
&.active,&:focus {
border-color: @xtxColor;
}
}
.code {
position: absolute;
right: 1px;
top: 1px;
text-align: center;
line-height: 34px;
font-size: 14px;
background: #f5f5f5;
color: #666;
width: 90px;
height: 34px;
cursor: pointer;
}
}
> .error {
position: absolute;
font-size: 12px;
line-height: 28px;
color: @priceColor;
i {
font-size: 14px;
margin-right: 2px;
}
}
}
.agree {
a {
color: #069;
}
}
.btn {
display: block;
width: 100%;
height: 40px;
color: #fff;
text-align: center;
line-height: 40px;
background: @xtxColor;
&.disabled {
background: #cfcdcd;
}
}
}
.action {
padding: 20px 40px;
display: flex;
justify-content: space-between;
align-items: center;
.url {
a {
color: #999;
margin-left: 10px;
}
}
}
}
</style>
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
