vue elmentui form表单验证失败
elmentUI 表单验证失败,不管怎么验证都是未输入
如下
vue代码如下
我改怎么修改才能正常校验
<template>
<div class="container">
<div class="main">
<!-- 整个注册盒子 -->
<div class="loginbox">
<!-- 左侧的注册盒子 -->
<div class="loginbox-in">
<el-form v-model="userobj" class="userbox" :rules="rules">
<el-form-item lable="用户名" prop="username">
<el-input class="user" id="user" v-model="userobj.name" placeholder="用户名">
<i class="el-input__icon el-icon-user-solid" slot="prefix"></i>
</el-input>
</el-form-item>
<el-form-item lable="密码" prop="userpwd">
<el-input class="pwd" id="password" type="password" v-model="userobj.pwd" placeholder="密码">
<i class="el-input__icon el-icon-s-help" slot="prefix"></i>
</el-input>
</el-form-item>
<el-form-item lable="验证码" prop="chackcode">
<el-input class="pwd" id="code" type="text" v-model="userobj.code" placeholder="验证码">
<template slot="append" style="padding: 0"><img :src="codedata" style="width: 80px;height: 30px"
slot="suffix" @click="getcolorimg"></template>
</el-input>
</el-form-item>
</el-form>
<div class="log-box">
<div class="log-box-text" @click="Forgetpassword"> 忘记密码</div>
<button class="login_btn" @click="login">登录</button>
</div>
<button class="register_btn" @click="gotoregister">若无账号请点击注册</button>
</div>
<!-- 右侧的注册盒子 -->
<div class="background">
<div class="title">Welcome to LED System Management Center</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "Login",
data: function () {
return {
//表单校验
rules: {
username: [
{required: true, message: "请输入用户名", trigger: "blur"},
{min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur'}
],
userpwd: [
{required: true, message: "请输入密码", trigger: "blur"},
{min: 6, max: 50, message: "长度在 6 到 50 个字符", trigger: "blur"}
],
chackcode: [
{required: true, message: "请输入验证码", trigger: "blur"},
{min: 4, max: 4, message: "验证码长度不符", trigger: "blur"}
]
},
userobj: {name: "", code: "", pwd: ""},
//验证码图片
codedata: "",
}
},
created() {
// TODO:创建钩子函数
this.getcolorimg()
},
methods: {
getcolorimg() {
// 获取验证码
this.$http.get("/GetCaptcha",)
.then((res) => {
console.log(res)
this.codedata = res
})
},
gotoregister() {
this.$router.push("Register")
},
login() {
// if this
// this.$http.post("register", {"name": this.name, 'pwd': this.pwd})
console.log(this.userobj)
},
Forgetpassword() {
},
},
}
</script>
<style lang="less" scoped>
* {
user-select: none;
cursor: default;
}
/deep/ .el-input-group__append {
padding: 0 !important;
}
.container {
width: 100%;
height: 100%;
background: #445b53;
}
.loginbox {
display: flex;
position: absolute;
width: 800px;
height: 400px;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 #4E655D;
}
.loginbox-in {
background-color: #89AB9E;
width: 240px;
}
.userbox {
margin-top: 160px;
width: 230px;
height: 190px;
margin-left: 5px;
}
.pwdbox {
height: 30px;
width: 225px;
display: flex;
margin-left: 5px;
}
.background {
width: 570px;
background-image: url('../assets/img/Christmas_Trees.png');
background-size: cover;
font-family: sans-serif;
}
.title {
margin-top: 320px;
font-weight: bold;
font-size: 20px;
color: #4E655D;
}
.title:hover {
font-size: 21px;
transition: all 0.4s ease-in-out;
cursor: pointer;
}
.uesr-text {
position: left;
}
input {
outline-style: none;
border: 0;
border-bottom: 1px solid #E9E9E9;
background-color: transparent;
height: 20px;
font-family: sans-serif;
font-size: 15px;
color: #445b53;
font-weight: bold;
}
/* input::-webkit-input-placeholder{
color:#E9E9E9;
} */
input:focus {
border-bottom: 2px solid #445b53;
background-color: transparent;
transition: all 0.2s ease-in;
font-family: sans-serif;
font-size: 15px;
color: #445b53;
font-weight: bold;
}
input:hover {
border-bottom: 2px solid #445b53;
background-color: transparent;
transition: all 0.2s ease-in;
font-family: sans-serif;
font-size: 15px;
color: #445b53;
font-weight: bold;
}
input:-webkit-autofill {
/* 修改默认背景框的颜色 */
box-shadow: 0 0 0px 1000px #89AB9E inset !important;
/* 修改默认字体的颜色 */
-webkit-text-fill-color: #445b53;
}
input:-webkit-autofill::first-line {
/* 修改默认字体的大小 */
font-size: 15px;
/* 修改默认字体的样式 */
font-weight: bold;
}
.log-box {
font-size: 12px;
display: flex;
justify-content: space-between;
width: 190px;
margin-left: 30px;
color: #4E655D;
margin-top: -5px;
align-items: center;
}
.log-box-text {
color: #4E655D;
font-size: 12px;
text-decoration: underline;
cursor: pointer;
user-select: none;
}
.login_btn {
background-color: #5f8276; /* Green */
border: none;
color: #FAFAFA;
padding: 5px 22px;
text-align: center;
text-decoration: none;
font-size: 13px;
border-radius: 20px;
outline: none;
}
.login_btn:hover {
box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
cursor: pointer;
background-color: #0b5137;
transition: all 0.2s ease-in;
}
.warn {
margin-top: 60px;
/* margin-right:120px; */
margin-left: -120px;
margin-bottom: 5px;
font-weight: bold;
font-size: 17px;
}
.register_btn {
background-color: transparent; /* Green */
border: none;
text-decoration: none;
font-size: 12px;
/* border-radius: 20px; */
color: #4E655D;
font-size: 12px;
text-decoration: underline;
display: flex;
margin-left: 25px;
outline: none;
}
.register_btn:hover {
font-weight: bold;
cursor: pointer;
}
@font-face {
font-family: "iconfont";
src: url('../assets/font/iconfont.eot');
src: url('../assets/font/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../assets/font/iconfont.woff2') format('woff2'), url('../assets/font/iconfont.woff') format('woff'), url('../assets/font/iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */ url('../assets/font/iconfont.svg#iconfont') format('svg');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 20px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
height: 22px;
color: #4E655D;
margin-right: 10px;
margin-top: 3px;
}
.icon-key:before {
content: "\e775";
}
.icon-account:before {
content: "\e817";
}
</style>
这两个字段保持一致
检验和数据 字段不一致
1.第8行：:model="userobj" ref="userobj"
2.prop与key值的对应问题
3.login方法
<template>
<div class="container">
<div class="main">
<!-- 整个注册盒子 -->
<div class="loginbox">
<!-- 左侧的注册盒子 -->
<div class="loginbox-in">
<el-form
:model="userobj"
class="userbox"
ref="userobj"
:rules="rules"
>
<el-form-item lable="用户名" prop="name">
<el-input
class="user"
id="user"
v-model="userobj.name"
placeholder="用户名"
>
<i class="el-input__icon el-icon-user-solid" slot="prefix"></i>
</el-input>
</el-form-item>
<el-form-item lable="密码" prop="pwd">
<el-input
class="pwd"
id="password"
type="password"
v-model="userobj.pwd"
placeholder="密码"
>
<i class="el-input__icon el-icon-s-help" slot="prefix"></i>
</el-input>
</el-form-item>
<el-form-item lable="验证码" prop="code">
<el-input
class="pwd"
id="code"
type="text"
v-model="userobj.code"
placeholder="验证码"
>
<template slot="append" style="padding: 0"
><img
:src="codedata"
style="width: 80px; height: 30px"
slot="suffix"
@click="getcolorimg"
/></template>
</el-input>
</el-form-item>
</el-form>
<div class="log-box">
<div class="log-box-text" @click="Forgetpassword">忘记密码</div>
<button class="login_btn" @click="login('userobj')">登录</button>
</div>
<button class="register_btn" @click="gotoregister">
若无账号请点击注册
</button>
</div>
<!-- 右侧的注册盒子 -->
<div class="background">
<div class="title">Welcome to LED System Management Center</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "Login",
data: function () {
return {
//表单校验
rules: {
name: [
{ required: true, message: "请输入用户名", trigger: "blur" },
{
min: 2,
max: 50,
message: "长度在 2 到 50 个字符",
trigger: "blur",
},
],
pwd: [
{ required: true, message: "请输入密码", trigger: "blur" },
{
min: 6,
max: 50,
message: "长度在 6 到 50 个字符",
trigger: "blur",
},
],
code: [
{ required: true, message: "请输入验证码", trigger: "blur" },
{ min: 4, max: 4, message: "验证码长度不符", trigger: "blur" },
],
},
userobj: { name: "", code: "", pwd: "" },
//验证码图片
codedata: "",
};
},
created() {
// TODO:创建钩子函数
this.getcolorimg()
},
methods: {
getcolorimg() {
// 获取验证码
this.$http
.get("/GetCaptcha")
.then((res) => {
console.log(res);
this.codedata = res;
});
},
gotoregister() {
this.$router.push("Register");
},
login(formName) {
// if this
// this.$http.post("register", {"name": this.name, 'pwd': this.pwd})
// console.log(this.userobj);
this.$refs[formName].validate((valid) => {
if (valid) {
alert("submit!");
} else {
console.log("error submit!!");
return false;
}
});
},
Forgetpassword() {},
},
};
</script>
<style lang="less" scoped>
* {
user-select: none;
cursor: default;
}
/deep/ .el-input-group__append {
padding: 0 !important;
}
.container {
width: 100%;
height: 100%;
background: #445b53;
}
.loginbox {
display: flex;
position: absolute;
width: 800px;
height: 400px;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 #4E655D;
}
.loginbox-in {
background-color: #89AB9E;
width: 240px;
}
.userbox {
margin-top: 160px;
width: 230px;
height: 190px;
margin-left: 5px;
}
.pwdbox {
height: 30px;
width: 225px;
display: flex;
margin-left: 5px;
}
.background {
width: 570px;
background-image: url('../assets/img/Christmas_Trees.png');
background-size: cover;
font-family: sans-serif;
}
.title {
margin-top: 320px;
font-weight: bold;
font-size: 20px;
color: #4E655D;
}
.title:hover {
font-size: 21px;
transition: all 0.4s ease-in-out;
cursor: pointer;
}
.uesr-text {
position: left;
}
input {
outline-style: none;
border: 0;
border-bottom: 1px solid #E9E9E9;
background-color: transparent;
height: 20px;
font-family: sans-serif;
font-size: 15px;
color: #445b53;
font-weight: bold;
}
/* input::-webkit-input-placeholder{
color:#E9E9E9;
} */
input:focus {
border-bottom: 2px solid #445b53;
background-color: transparent;
transition: all 0.2s ease-in;
font-family: sans-serif;
font-size: 15px;
color: #445b53;
font-weight: bold;
}
input:hover {
border-bottom: 2px solid #445b53;
background-color: transparent;
transition: all 0.2s ease-in;
font-family: sans-serif;
font-size: 15px;
color: #445b53;
font-weight: bold;
}
input:-webkit-autofill {
/* 修改默认背景框的颜色 */
box-shadow: 0 0 0px 1000px #89AB9E inset !important;
/* 修改默认字体的颜色 */
-webkit-text-fill-color: #445b53;
}
input:-webkit-autofill::first-line {
/* 修改默认字体的大小 */
font-size: 15px;
/* 修改默认字体的样式 */
font-weight: bold;
}
.log-box {
font-size: 12px;
display: flex;
justify-content: space-between;
width: 190px;
margin-left: 30px;
color: #4E655D;
margin-top: -5px;
align-items: center;
}
.log-box-text {
color: #4E655D;
font-size: 12px;
text-decoration: underline;
cursor: pointer;
user-select: none;
}
.login_btn {
background-color: #5f8276; /* Green */
border: none;
color: #FAFAFA;
padding: 5px 22px;
text-align: center;
text-decoration: none;
font-size: 13px;
border-radius: 20px;
outline: none;
}
.login_btn:hover {
box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
cursor: pointer;
background-color: #0b5137;
transition: all 0.2s ease-in;
}
.warn {
margin-top: 60px;
/* margin-right:120px; */
margin-left: -120px;
margin-bottom: 5px;
font-weight: bold;
font-size: 17px;
}
.register_btn {
background-color: transparent; /* Green */
border: none;
text-decoration: none;
font-size: 12px;
/* border-radius: 20px; */
color: #4E655D;
font-size: 12px;
text-decoration: underline;
display: flex;
margin-left: 25px;
outline: none;
}
.register_btn:hover {
font-weight: bold;
cursor: pointer;
}
@font-face {
font-family: "iconfont";
src: url('../assets/font/iconfont.eot');
src: url('../assets/font/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../assets/font/iconfont.woff2') format('woff2'), url('../assets/font/iconfont.woff') format('woff'), url('../assets/font/iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */ url('../assets/font/iconfont.svg#iconfont') format('svg');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 20px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
height: 22px;
color: #4E655D;
margin-right: 10px;
margin-top: 3px;
}
.icon-key:before {
content: "\e775";
}
.icon-account:before {
content: "\e817";
}
</style>