1、先在form表单中加入:rules规则属性
2、再在<script></script>标签中添加rules模块,创建username,password对应的规则
3、之后使用prop调用对应的规则
4、刷新页面!
注意:创建的规则名(prop调用的模块名称,例:prop="username")必须与v-model的模块名相同(例:v-model="loginForm.username"),否则会验证出错
<template>
<div class="login_container">
<div class="login_box">
<!-- 头像区域 -->
<div class="avatar_box">
<img src="../assets/logo.png" alt="">
</div>
<!-- 登录表单区 -->
<el-form :model="loginForm" :rules="loginFormRules" label-width="0px" class="login_form">
<!-- 账户区 -->
<el-form-item prop="username">
<el-input v-model="loginForm.username" prefix-icon="el-icon-user-solid"></el-input>
</el-form-item>
<!-- 密码区 -->
<el-form-item prop="password">
<el-input v-model="loginForm.password" prefix-icon="el-icon-lock" type="password" ></el-input>
</el-form-item>
<!-- 按钮区 -->
<el-form-item class="btns">
<el-button type="primary">登录</el-button>
<el-button type="info">重置</el-button>
</el-form-item>
</el-form>
</div>
</div>
</template>
<script>
export default {
data(){
return {
// 这是登录表单的数据绑定对象
loginForm:{
username:'zs',
password:'123'
},
loginFormRules:{
// 用户名验证
username:[
{ required: true, message: '请输入用户名称', trigger: 'blur' },
{ min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
],
// 密码验证
password:[
{ required: true, message: '请输入用户密码', trigger: 'blur' },
{ min: 10, max: 16, message: '长度在 10 到 16 个字符', trigger: 'blur' }
]
}
}
}
}
</script>