提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
elemeng-ui中el-form 表单如何校验
安装elemeng-ui
npm i element-ui -S
在main.js中引入
查看官网
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
Vue.use(ElementUI);
new Vue({
el: '#app',
render: h => h(App)
});
下面是个例子
<template>
<div class="login_container">
<div class="login_box">
<!-- 头像区 -->
<div class="avatar_box">
<img src="../assets/logo.png" alt="" />
</div>
<!-- 表单区 -->
<el-form
ref="loginFormRef"
label-width="0px"
class="login_form"
:model="form"
:rules="loginRules"
>
<!-- 用户名· -->
<el-form-item prop="username">
<el-input
prefix-icon="iconfont icon-user"
v-model="form.username"
></el-input>
</el-form-item>
<!-- 密码 -->
<el-form-item prop="password">
<el-input
type="password"
prefix-icon="iconfont icon-3702mima"
v-model="form.password"
></el-input>
</el-form-item>
<!-- 按钮区 -->
<el-form-item class="btns">
<el-button type="primary" @click="login">登录</el-button>
<el-button type="info" @click="resetLoginForm">重置</el-button>
</el-form-item>
</el-form>
</div>
</div>
</template>
<script>
export default {
data() {
return {
form: {
username: "admin",
password: "123456",
},
// 表单验证规则
loginRules: {
// 验证用户名
username: [
{ required: true, message: "请输入登录名称", trigger: "blur" },
{
min: 3,
max: 10,
message: "长度在 3 到 10 个字符",
trigger: "blur",
},
],
// 验证密码
password: [
{ required: true, message: "请输入登录密码", trigger: "blur" },
{
min: 6,
max: 15,
message: "长度在 6 到 15 个字符",
trigger: "blur",
},
],
},
};
},
mounted() {},
methods: {
// 点击重置
resetLoginForm() {
// console.log(this);
this.$refs.loginFormRef.resetFields();
},
login() {
this.$refs.loginFormRef.validate( async valid => {
console.log(valid);
if(!valid) return ;
const {data:res} = await this.$axios.post('login',this.form)
console.log(res);
});
},
},
};
</script>
<style lang='scss' scoped>
.login_container {
background: #2b4b6b;
height: 100%;
}
.login_box {
width: 450px;
height: 300px;
background: #fff;
border-radius: 3px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
.avatar_box {
height: 130px;
width: 130px;
border: 1px solid #eee;
border-radius: 50%;
padding: 10px;
box-shadow: 0 0 10px #eee;
position: absolute;
left: 50%;
transform: translate(-50%, -30%);
background: #fff;
img {
width: 100%;
height: 100%;
border-radius: 50%;
background: #eee;
}
}
}
.login_form {
position: absolute;
bottom: 0;
width: 100%;
padding: 0 20px;
box-sizing: border-box;
}
.btns {
display: flex;
justify-content: flex-end;
}
</style>