.vue文件部分代码:
<template>
<div id="Login">
<el-row :gutter="20">
<el-col :span="8" :offset="8">
<div class="box"></div>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="8" :offset="8">
<el-card shadow="always">
<h1 style="text-align:center">欢迎登陆</h1>
<el-divider></el-divider>
<el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item
label="账号"
prop="acount"
:rules="[
{ required: true, message: '账户不能为空'},
]"
>
<el-input type="text" placeholder="请输入账户" v-model="ruleForm.acount" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="密码" prop="pass"
:rules="[
{ required: true, message: '密码不能为空'},
]">
<el-input type="password" placeholder="请输入密码" v-model="ruleForm.pass" show-password></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
</el-card>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
data() {
var checkacount = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入账号'));
} else {
if (this.ruleForm.acount !== '') {
this.$refs.ruleForm.validateField('checkacount');
}
callback();
}
};
var validatePass = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入密码'));
} else {
if (this.ruleForm.checkPass !== '') {
this.$refs.ruleForm.validateField('pass');
}
callback();
}
};
return {
ruleForm: {
pass: '',
acount: ''
},
rules: {
acount:[
{ validator: checkacount, trigger: 'blur' }
],
pass: [
{ validator: validatePass, trigger: 'blur' }
],
}
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
}
</script>
<style>
.el-card {
justify-content: center;
height:350px;
width:400px;
border-radius: 15px;
}
.box{
height:64px;
}
</style>
main.js文件部分代码:
import Vue from 'vue'
import ElementUI from 'element-ui'
import App from'./components/App_login.vue'
Vue.use(ElementUI)
Vue.config.productionTip = false
new Vue({
el:'#app',
render: h=>h(App)
})
页面效果: