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>
<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>
标签:min,refs,element,trigger,UI,登陆,blur,message,formName 来源: https://www.cnblogs.com/xiannv/p/11183882.html