element-UI 登陆

<template>

<div>

<el-form :model="loginfrom" :rules="rules" ref="loginfrom" label-width="100px" class="demo-loginfrom">

<el-form-item label="账号" prop="username">

<el-input v-model="loginfrom.username"></el-input>

</el-form-item>

<el-form-item label="密码" prop="password">

<el-input v-model="loginfrom.password"></el-input>

</el-form-item>

 

<el-form-item>

<el-button type="primary" @click="submitForm('loginfrom')">注册</el-button>

<el-button @click="resetForm('loginfrom')">重置</el-button>

</el-form-item>

</el-form>

</div>

</template>

<script>

export default {

data() {

return {

loginfrom: {

username: 'admin',

password:'123456'

},

rules: {

username: [

{ required: true, message: '请输入账号', trigger: 'blur' },

{ min: 3, max: 8, message: '长度在 3 到 8 个字符', trigger: 'blur' }

],

password: [

{ required: true, message: '请输入密码', trigger: 'blur' },

{ min: 3, max: 8, message: '长度在 3 到 8 个字符', 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>

</style>