需求:一个el-form-item有多个输入框,提交表单需要校验
方法:在el-form-item上添加required,里面再放一层el-form-item,设置prop,在rules填校验规则
<template>
<div>
<el-form
:rules="rules"
:model="ruleForm"
ref="ruleForm"
label-width="100px"
>
<el-form-item label="寄货人" required>
<div style="display: flex">
<el-form-item prop="senderName" style="margin-right: 10px">
<el-input
v-model.trim="ruleForm.senderName"
placeholder="请输入寄货人姓名"
clearable
></el-input>
</el-form-item>
<el-form-item prop="senderPhone">
<el-input
v-model.trim="ruleForm.senderPhone"
placeholder="请输入寄货人联系电话"
clearable
></el-input>
</el-form-item>
</div>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')"
>提交</el-button
>
<el-button @click="resetForm('ruleForm')">取消</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
ruleForm: {
senderName: '', // 寄货人
senderPhone: '' // 寄货人电话
},
rules: {
senderName: [
{ required: true, message: '请输入寄货人姓名', trigger: 'blur' }
],
senderPhone: [
{ required: true, message: '请输入寄货人联系电话', trigger: 'blur' }
]
}
}
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!')
} else {
console.log('error submit!!')
return false
}
})
},
resetForm(formName) {
this.$refs[formName].resetFields()
}
}
}
</script>
<style lang="less" scoped>
</style>