validateField is not a function？
elementplus表单效验，报错显示formDateRef.value.validateField is not a function
<template> <div class="login-body">
<div class="login-panel">
<el-from
ref="formDateRef"
class="login-register"
:model="formDate"
:rules="rules"
@submit.prevent
>
<div class="login-title">个人云盘</div>
<el-from-item prop="email">
<el-input
size="large"
clearable
placeholder="请输入邮箱"
v-model.trim="fromData.email"
maxLength="150"
>
<template #prefix>
<span class="iconfont icon-account"></span>
</template>
</el-input>
</el-from-item>
<!--登录密码-->
<el-from-item prop="password" v-if="opType==1">
<el-input
type="password"
size="large"
clearable
placeholder="请输入密码"
v-model.trim="fromData.password"
show-password
>
<template #prefix>
<span class="iconfont icon-password"></span>
</template>
</el-input>
</el-from-item>
<!--注册-->
<div v-if="opType==0 || opType==2">
<!--input输入-->
<el-form-item prop="emailCode" >
<div class="send-emali-panel">
<el-input size="large" placeholder="请输入邮箱验证码" v-model.trim="fromData.emailCode">
<template #prefix>
<span class="iconfont icon-checkcode"></span>
</template>
</el-input>
<el-button class="send-mail-btn" type="primary" size="large" @click="getEmailCode">
获取验证码
</el-button>
</div>
<el-popover placement="left" :width="500" trigger="click">
<div>
<p>请从垃圾箱中查找验证码</p>
</div>
<template #reference>
<span class="a-link" :style="{ 'font-size': '14px'}">
未收到邮箱验证码？
</span>
</template>
</el-popover>
</el-form-item>
<!--昵称-->
<el-form-item prop="nickName" v-if="opType==0">
<el-input size="large" placeholder="请输入昵称" v-model.trim="fromData.nickName" maxLength="20">
<template #prefix>
<span class="iconfont icon-account"></span>
</template>
</el-input>
</el-form-item>
<!--注册密码，找回密码-->
<el-form-item prop="registerPassword" >
<el-input type="password" size="large" placeholder="请输入密码" v-model.trim="fromData.registerPassword">
<template #prefix>
<span class="iconfont icon-password"></span>
</template>
</el-input>
</el-form-item>
<!--重复密码-->
<el-form-item prop="reRegisterPassword" >
<el-input type="password" size="large" placeholder="请再一次输入密码" v-model.trim="fromData.reRegisterPassword">
<template #prefix>
<span class="iconfont icon-password"></span>
</template>
</el-input>
</el-form-item>
</div>
<!--验证码-->
<el-from-item prop="checkCode">
<div class="check-code-panel">
<el-input
size="large"
placeholder="请输入验证码"
v-model.trim="fromData.checkCode"
>
<template #prefix>
<span class="iconfont icon-checkcode"></span>
</template>
</el-input>
<img src="checkCodeUrl" class="check-code" @click="changeChekCode(0)"/>
</div>
</el-from-item>
<!-- 下拉框 -->
<el-form-item v-if="opType==1" >
<div class="rememberme-panel" >
<el-checkbox v-model="fromData.rememberMe" >记住我</el-checkbox>
</div>
<div class="not-account">
<a herl="javascript:void(0)" class="a-link" @click="showPanel(2)">忘记密码</a>
<a herl="javascript:void(0)" class="a-link" @click="showPanel(0)">没有账号</a>
</div>
</el-form-item>
<!--找回密码-->
<el-form-item v-if="opType==2" >
<a herl="javascript:void(0)" class="a-link" @click="showPanel(1)">去登录？</a>
</el-form-item>
<!---->
<el-form-item v-if="opType==0" >
<a herl="javascript:void(0)" class="a-link" @click="showPanel(1)">去登录？</a>
</el-form-item>
<!--登录按钮-->
<el-form-item >
<el-button type="primary" class="op-btn" size="large">
<span v-if="opType==1">登录</span>
<span v-if="opType==0">注册</span>
<span v-if="opType==2">重置密码</span>
</el-button>
</el-form-item>
</el-from>
</div>
<Dialog
:show="dialogConfig4SendMailCode.show"
:title="dialogConfig4SendMailCode.title"
:buttons="dialogConfig4SendMailCode.buttons"
width=500px
:showCancel="false"
@close="dialogConfig4SendMailCode.show = false"
>
<el-form
:model="formData4SendMailCode"
:rules="rules"
ref="formData4SendMailCodeRef"
label-width="80px"
@submit.prevent
>
<el-form-item label="邮箱" >
{{ formDate.email }}
</el-form-item>
</el-form>
<el-form-item label="验证码" prop="checkCode" >
<div class="check-code-panel">
<el-input
size="large"
placeholder="请输入验证码"
v-model.trim="formData4SendMailCode.checkCode"
>
<template #prefix>
<span class="iconfont icon-checkcode"></span>
</template>
</el-input>
<img src="checkCodeUrl" class="check-code" @click="changeChekCode(1)"/>
</div>
</el-form-item>
</Dialog>
<div class="videoContainer">
<video
:style="fixStyle"
class="fillWidth"
playsinline=""
autoplay=""
muted=""
loop=""
v-on:canplay="canplay"
>
<source src="../assets/1.mp4" type="video/mp4" />
</video>
</div>
</div>
</template>
<script setup>
import{ ref, reactive , getCurrentInstance ,nextTick}from "vue"
const {proxy} =getCurrentInstance();
const api={
checkCodeUrl: "/api/checkCode",
};
//操作类型：0：注册；1：登录；2：重置密码
const opType=ref(1);
const showPanel=(type) =>{
opType.value=type;
};
const fromData =ref({});
const formDateRef=ref();
const rules ={
email: [{required: true,message:"请输入正确的邮箱"}],
};
const checkCodeUrl=ref(api.checkCode);
const changeChekCode =(type)=>{
checkCodeUrl.value= api.checkCode + "?type="+type+"&time="+new Date().getTime;
};
//发送邮箱验证码
const formData4SendMailCode = ref({});
const formData4SendMailCodeRef = ref();
const dialogConfig4SendMailCode = reactive({
show: false,
title: "发送邮箱验证码",
buttons: [
{
type: "primary",
text: "发送验证码",
click: (e) => {
submitForm();
},
},
],
});
const getEmailCode=()=>{
formDateRef.value.validateField("email" , (valid) => {
if(!valid){
return;
}
dialogConfig4SendMailCode.show = true;
});
};
</script>
<script>
export default {
data() {
return {
videoCanPlay: false, //控制视屏加载状态显示图片
fixStyle: '' //屏幕发生变化时给播放器设置的样式
}
},
mounted() {
this.getVideoStyle()
},
methods: {
//视屏播放失败展示背景图片
canplay() {
this.videoCanPlay = true
},
//监听屏幕大小实时给播放器设置宽高
getVideoStyle() {
window.onresize = () => {
const windowWidth = document.body.clientWidth
const windowHeight = document.body.clientHeight
const windowAspectRatio = windowHeight / windowWidth
console.log(windowWidth, windowHeight, windowAspectRatio, '屏幕实时大小')
let videoWidth
let videoHeight
if (windowAspectRatio < 0.5625) {
videoWidth = windowWidth
videoHeight = videoWidth * 0.5625
this.fixStyle = {
height: windowWidth * 0.5625 + 'px',
width: windowWidth + 'px',
'margin-bottom': (windowHeight - videoHeight) / 2 + 'px',
'margin-left': 'initial'
}
} else {
videoHeight = windowHeight
videoWidth = videoHeight / 0.5625
this.fixStyle = {
height: windowHeight + 'px',
width: windowHeight / 0.5625 + 'px',
'margin-left': (windowWidth - videoWidth) / 2 + 'px',
'margin-bottom': 'initial'
}
}
}
window.onresize()
}
}
}
</script>
<style lang="scss" scoped>
.login-body {
height: calc(100vh);
background-size: cover;
display: flex;
.login-panel{
width: 430px;
margin-right: 15%;
margin-top: calc((100vh - 500px)/2);
.login-register{
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background: rgba(255,255,255,0.3);
border-radius: 5px;
margin-top: 10px;
padding: 25px;
.login-title{
text-align: center;
font-size: 18px;
font-weight: bold;
margin-bottom: 20px;
color: #0b1017;
}
.send-emali-panel{
display: flex;
width: 100%;
justify-content: space-between;
.send-mail-btn{
margin-left: 5px;
}
}
.rememberme-panel{
width: 100%;
color:#007fff;
}
.no-account{
width:100%;
display: flex;
justify-content: space-between;
}
.op-btn{
width: 100%;
}
}
}
.check-code-panel{
width: 60%;
display: flex;
.check-code{
margin-left: 5px;
cursor: pointer;
}
}
.login-btn-qq{
margin-top: 20px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
img{
cursor: pointer;
margin-left: 30px;
width: 20px;
}
}
.login-page {
background-size: cover;
background-attachment: scroll;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.login-background {
width: 100%;
display: block;
position: fixed;
top: 0;
height: 100%;
left: 0;
z-index: -99;
}
.login-content {
width: 640px;
height: 780px;
z-index: 2;
left: 600px;
top: 230px;
border-width: 0px;
background: rgba(0, 0, 0, 0.3);
backdrop-filter: blur(2px);
border-radius: 2px;
border: none;
box-shadow: none;
color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
}
.videoContainer {
position: fixed;
width: 100%;
height: 100%;
overflow: hidden;
z-index: -100;
}
.videoContainer:before {
content: '';
position: absolute;
width: 100%;
height: 100%;
display: block;
z-index: -1;
top: 0;
left: 0;
background: rgba(25, 29, 34, 0.65);
}
.fillWidth {
width: 100%;
}
}
</style>
解决
回答：
为什么要加.value
以上是 validateField is not a function？ 的全部内容， 来源链接： utcz.com/p/935199.html
