vue登录页面之表单验证(element-ui)
一、准备工作
1.安装element-UI npm i element-ui -S
安装axios $ npm install axios
2.按需引入npm install babel-plugin-component -D
然后将babel修改为
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
],
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}
3.创建pugins文件夹,在其下创建element.js用来放置项目按需引入的组件(扎样写的目的在与当项目引用的组件变多了,会使mian.js变得很乱,这样更方便管理),再在main,js中引入改文件
element.js
import Vue from 'vue'
import { Button, Form, FormItem, Input } from 'element-ui'
Vue.use(Button)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)
mian.js
// 按需导入组件
import './pugins/element'
import 'element-ui/lib/theme-chalk/index.css'
二、完成静态页面的搭建
1.引入form以及其他组件搭建静态页面
<div class="login_container">
<div class="login_box">
<!-- 头像区 -->
<div class="avatar_box">
<img src="../assets/logo.png" alt="avatar" />
</div>
<!-- 登录表单 -->
<div>
<el-form>
<el-form-item label="账号">
<el-input></el-input>
</el-form-item>
<el-form-item label="密码">
<el-input></el-input>
</el-form-item>
<el-form-item class="btns">
<el-button type="primary">登录</el-button>
<el-button type="info">重置</el-button>
</el-form-item>
</el-form>
</div>
</div>
</div>
.login_container{
width: 100%;
height: 100%;
background: #2b4b6b;
.login_box{
width: 450px;
height: 300px;
border-radius: 3px;
background: white;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
.login_image{
width: 130px;
height: 130px;
background: #fff;
border: 1px solid #ccc;
box-shadow: 0 0 10px #eee;
border-radius: 50%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: -75px auto;
img{
width: 100%;
height: 100%;
border-radius: 50%;
}
.el-form{
width: 100%;
}
}
.login_form{
width: 100%;
position: absolute;
bottom: 30px;
padding: 0 20px;
box-sizing: border-box;
.btns{
display: flex;
justify-content: center;
}
}
}
}
2.给表单双向绑定对象以便直接获取用户信息,动态绑定rules表单校验规则,定义属性ref以便获得整个表单DOM对象
<el-form
:model="loginForm"
:rules="loginFormRelus"
ref='loginFormRgf'
label-width="60px"
>
</el-form>
data () {
return {
loginForm: {
username: 'admin',
password: '123456'
},
loginFormRelus: {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
{ min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ pattern: /^[a-z0-9_-]{6,18}$/, message: '密码由6-18为字母数字下划线组成' }
]
}
}
}
/**
* required:是否必填
* message:提示文字
* trigger:触发动作
* min、max:规定长度
* pattern:正则表达式
*/
3.给重置按钮添加点击事件,重置表单
resetForm () {
this.$refs.loginFormRgf.resetFields()
}
resetFields是element-UI提供的表单方法,用来 对整个表单进行重置,将所有字段值重置为初始值并移除校验结果
4.给登录按钮添加点击事件,先进行表单验证,验证通过了就用表单双向绑定的对象进行数据请求,如果请求成功,就保存token
login () {
this.$refs.loginFormRgf.validate(async valid => {
// console.log(valid)
if (!valid) return false
const { data: res } = await this.$http.post('login', this.loginForm)
// console.log(res)
if (res.meta.status !== 200) return this.$message.error('登录失败')
this.$message.success('登录成功')
window.sessionStorage.setItem('token', res.data.token)
})
}