<el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm">
<el-button
class="loginBtn"
:loading="loading"
type="primary"
style="width:100%;margin-bottom:30px;"
@click.native.prevent="handleLogin"
>登录</el-button>
</el-form>
handleLogin() {
// 兜底校验 通过组件身上的ref 1-拿到实例对象 2.对象身上的方法validate
this.$refs.loginForm.validate((valid)=>{
if(valid){
// 登录
console.log('所有校验都通过了');
}
})
}
// 新添属性
background-image: url("~@/assets/common/login.jpg"); // 设置背景图片
background-position: center; // 将图片位置设置为充满整个屏幕
.loginBtn {
//改变登录按钮的样式 >先添加 .loginBtn类名
background: #407ffe;
height: 64px;
line-height: 32px;
font-size: 24px;
}
ElementUI中form表单兜底校验
最新推荐文章于 2023-01-02 09:46:01 发布
这篇博客介绍了如何在Vue中利用ref属性进行表单验证,并展示了如何自定义登录按钮的样式,包括背景图片、位置和尺寸等。在handleLogin方法中调用了validate方法来确保所有校验通过后执行登录操作。
摘要由CSDN通过智能技术生成