element-UI 登陆

Posted 2022-04-12 xiannv

<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>