<template> <el-form :model="formData" :rules="formRules" ref="form" label-width="100px"> <el-form-item label="对象1"> <el-input v-model="formData.object1.prop1" placeholder="属性1"></el-input> <el-input v-model="formData.object1.prop2" placeholder="属性2"></el-input> </el-form-item> <el-form-item label="对象2"> <el-input v-model="formData.object2.prop1" placeholder="属性1"></el-input> <el-input v-model="formData.object2.prop2" placeholder="属性2"></el-input> </el-form-item> <el-button type="primary" @click="submitForm">提交</el-button> </el-form> </template> <script> export default { data() { return { formData: { object1: { prop1: '', prop2: '' }, object2: { prop1: '', prop2: '' } }, formRules: { object1: { prop1: [ { required: true, message: '属性1不能为空', trigger: 'blur' } // 可以根据需要添加其他验证规则 ], prop2: [ { required: true, message: '属性2不能为空', trigger: 'blur' } // 可以根据需要添加其他验证规则 ] }, object2: { prop1: [ { required: true, message: '属性1不能为空', trigger: 'blur' } // 可以根据需要添加其他验证规则 ], prop2: [ { required: true, message: '属性2不能为空', trigger: 'blur' } // 可以根据需要添加其他验证规则 ] } } }; }, methods: { submitForm() { this.$refs.form.validate((valid) => { if (valid) { // 表单验证通过,可以在这里提交表单数据 console.log('表单验证通过'); } else { // 表单验证不通过 console.log('表单验证未通过'); return false; } }); } } }; </script>
标签:form,验证,rules,表单,trigger,为空,message,formItem,true From: https://www.cnblogs.com/iwen1992/p/18011652