el-form-item 行内多个校验
时间: 2023-12-14 16:31:54 浏览: 336
【JavaScript源代码】element多个表单校验的实现.docx
可以在el-form-item中使用rules属性来进行校验,同时可以使用prop属性来指定需要校验的字段。以下是el-form-item行内多个校验的示例代码:
```html
<template>
<el-form :model="form" inline>
<el-form-item label="用户名" prop="username" :rules="[
{ required: true, message: '请输入用户名', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
]">
<el-input v-model="form.username"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password" :rules="[
{ required: true, message: '请输入密码', trigger: 'blur' },
{ min: 6, max: 10, message: '长度在 6 到 10 个字符', trigger: 'blur' }
]">
<el-input type="password" v-model="form.password"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm">提交</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
form: {
username: '',
password: ''
}
};
},
methods: {
submitForm() {
this.$refs.form.validate(valid => {
if (valid) {
alert('校验成功');
} else {
alert('校验失败');
return false;
}
});
}
}
};
</script>
```
阅读全文