element学习：form表单的校验
html:
rules和prop
<el-form :model="Form" class="form_in" :rules="rules">
<!--账号-->
<el-form-item prop="username">
<el-input v-model="Form.username" prefix-icon="el-icon-user-solid" placeholder="请输入账号"></el-input>
</el-form-item>
<!--密码-->
<el-form-item prop="password">
<el-input v-model="Form.password" prefix-icon="el-icon-lock" placeholder="请输入密码" show-password></el-input>
</el-form-item>
<!--按钮-->
<el-form-item class="form_button">
<el-button type="primary" plain>登录</el-button>
<el-button type="info" plain>重置</el-button>
</el-form-item>
</el-form>
css:
rules中的名字要和data里一样，不然会出错误
既：
Form: {
username: ‘’,
password: ‘’
},
username: [
{required: true, message: ‘请输入账号’, trigger: ‘blur’},
{min: 1, max: 10, message: ‘长度在 1 到 10 个字符’, trigger: ‘blur’}
],
而不能是
name: [
{required: true, message: ‘请输入账号’, trigger: ‘blur’},
{min: 1, max: 10, message: ‘长度在 1 到 10 个字符’, trigger: ‘blur’}
],
data() {
return {
Form: {
username: '',
password: ''
},
rules: {
username: [
{required: true, message: '请输入账号', trigger: 'blur'},
{min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur'}
],
password: [
{required: true, message: '请输入密码', trigger: 'blur'},
]
}
}
}