一个el-form中放两个el-input怎么加必填表单验证
时间: 2023-08-18 09:56:07 浏览: 114
您可以使用`rules`属性来为`el-input`添加必填表单验证。以下是一个示例代码,其中`required`规则用于确保输入框不能为空。
```html
<template>
<el-form ref="form" :model="form" :rules="rules">
<el-form-item label="Input 1" prop="input1">
<el-input v-model="form.input1"></el-input>
</el-form-item>
<el-form-item label="Input 2" prop="input2">
<el-input v-model="form.input2"></el-input>
</el-form-item>
<el-button type="primary" @click="submitForm">Submit</el-button>
</el-form>
</template>
<script>
export default {
data() {
return {
form: {
input1: '',
input2: ''
},
rules: {
input1: [
{ required: true, message: 'Input 1 is required', trigger: 'blur' }
],
input2: [
{ required: true, message: 'Input 2 is required', trigger: 'blur' }
]
}
};
},
methods: {
submitForm() {
this.$refs.form.validate((valid) => {
if (valid) {
// 表单验证通过,可以进行提交操作
console.log('Form is valid');
} else {
// 表单验证失败,显示错误信息
console.log('Form is invalid');
}
});
}
}
};
</script>
```
在上面的示例中,我们为每个`el-input`定义了一个对应的验证规则,并将这些规则传递给`el-form`的`rules`属性。当点击"Submit"按钮时,`submitForm`方法会调用`validate`函数来触发表单验证。如果验证通过,则会执行提交操作;如果验证失败,则会显示相应的错误信息。
阅读全文