desarrollo de proyectos título vue + de tipo ui elemento de la matriz de validación de formularios complejos objetos
-
escenario de demanda
en el reciente desarrollo del proyecto, que tiene un módulo sobre los sistemas de contratación, las adquisiciones no se puede hacer para formulario de información evitar la compra de libro mayor, y se añade la adquisición de la información y la complejidad de forma dinámica, por lo que requiere el complejo conjunto la mayor parte de los objetos a través del bucle añadir validación. Primero se debe agregar un cuadro 1-1, esta verificación representaciones.
Aquí alguna duda le puede dar una respuesta breve ah. 1 dudas: por ejemplo, ¿por qué no las especificaciones, ya que las reglas son vinculantes y una gran variedad de ingredientes, que es la base de los datos antes ya se había hecho. A fin de comprobar los ingredientes comprobarán si la presencia o ausencia de datos de especificación. 2 preguntando: ¿Por qué las normas que prohíben la comida y entran, como para evitar que la información del cliente de forma incorrecta, que es los requisitos del proyecto, debido a que diferentes personas llenan N posibilidades serían una col, col china llamada tales como A, B llama col china, C llama la col ... como que no es propicio para se resumen la parte posterior de los datos. Por lo tanto, para agregar una caja al lado del botón de selección de entrada para abrir los ingredientes de la página, los ingredientes utilizados para seleccionar datos. Como amigo tiene alguna otra pregunta que también puede ser privado. -
Necesidad de verificar los datos complejos objetos
Ahora nos dejó en los datos en tiempo real en el formulario de arriba, de la siguiente manera:
dailyUseRecordForm:////新增、修改日消耗品登记信息中的选项信息
{ date:'',//新增和修改日消耗品的登记日期
gysName:'',//新增和修改日消耗品的供应商信息
gysId:'',//新增和修改台账信息供应商id
details:[
{
foodName:'',//新增和修改日消耗品的名称
spec:'',//新增和修改日消耗品的规格
num:'',//新增和修改日消耗品的数量
price:'',//新增和修改日消耗品的单价
foodId:'',//新增和修改台账信息食物id
id:''//该对象的id
}
]
},
定义的表单数据类型如上所示，需要说明一下，初始的时候食材数据数组（dailyUseRecordForm.details）只有一条空数据，点击小“+”号按钮，或者下面的批量添加按钮都能往里面添加新的对象数据，下面是点击加号往里面添加一条数据后的样子：
dailyUseRecordForm:////新增、修改日消耗品登记信息中的选项信息
{ date:'',//新增和修改日消耗品的登记日期
gysName:'',//新增和修改日消耗品的供应商信息
gysId:'',//新增和修改台账信息供应商id
details:[
{
foodName:'',//新增和修改日消耗品的名称
spec:'',//新增和修改日消耗品的规格
num:'',//新增和修改日消耗品的数量
price:'',//新增和修改日消耗品的单价
foodId:'',//新增和修改台账信息食物id
id:''//该对象的id
},
{
foodName:'',
spec:'',
num:'',
price:'',
foodId:'',
id:''
}
]
},
- En la porción distal forma página de validación
(1) definir las reglas de validación de formularios:
dailyUseRecordRules:{//台账信息表单验证规则
gysName:[
{ required: true, message: '请输入供应商名称', trigger: 'blur' },
{ min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' },
],
date: [
{ required: true, message: '请选择日期', trigger: 'blur' },
// { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
],
foodName:[//食材名称
{ required: true, message: '请选择食材', trigger: 'blur' },
{ min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'change' },
],
num:[
{ required: true, message: '请输入数量', trigger: 'blur' },
{
required: false,
pattern: /(^[1-9]\d*$)/,
message: '数量格式有误',
trigger: 'blur'
}
],
price:[
{ required: true, message: '请输入价格', trigger: 'blur' },
{
required: false,
pattern: /(^[1-9]\d*(\.\d{1,2})?$)|(^0(\.\d{1,2})?$)/,
message: '价格格式有误',
trigger: 'blur'
}
]
}
Estos son necesitarán ser utilizado reglas de validación de formulario, se definen en la matriz de datos.
(2) la validación de formularios
, porque el tema de hoy es objeto complejo recorrido de verificación, por lo que sólo analizamos como la validación de datos complejas estructuras de datos, que es una matriz de objetos por encima '' en dailyUseRecordForm.details. Cómo atravesar la matriz para agregar validación para cada elemento.
<div v-for="(item,index) in dailyUseRecordForm.details :key="index">
<el-form-item label="name" :prop="`details[${index}].foodName`" :rules="dailyUseRecordRules.foodName">
<el-input v-model="item.foodName"></el-input>
</el-form-item>
<el-form-item label="name" :prop="`details[${index}].num`" :rules="dailyUseRecordRules.num">
<el-input v-model="item.num"></el-input>
</el-form-item>
<el-form-item label="name" :prop="`details[${index}].price`" :rules="dailyUseRecordRules.price">
<el-input v-model="item.price"></el-input>
</el-form-item>
</div>
以上的几行代码便是解决表单验证的核心所在，因为自己的页面中有按钮，占位符等不利于观察的因素，所以先给出一个思路。下面是自己实际中的情况，其实这个没有看到必要，只是为了增加一点实际的项目代入感，我还是粘上，想看的人看，不想看的人忽略。
<el-form-item v-for='(item,index) in dailyUseRecordForm.details' :label=" '食材'+(index+1) " :key="index">
<el-form-item label='名称' :prop="`details[${index}].foodName`" :rules='dailyUseRecordRules.foodName'>
<el-input v-model="item.foodName" autocomplete="off" style="width:130px;" :placeholder=dailyUseRecordMessage.name :disabled="true"> </el-input>
<el-button icon="el-icon-search" @click='searchDialogOpen(index)'></el-button>
</el-form-item>
<el-form-item label='规格'>
<el-input v-model="item.spec :placeholder=dailyUseRecordMessage.spec :disabled="true"></el-input >
</el-form-item>
<el-form-item label='数量' :prop="`details[${index}].num`" :rules='dailyUseRecordRules.num'>
<el-input v-model="item.num" autocomplete="off" style="width:130px;" :placeholder=dailyUseRecordMessage.num clearable></el-input>
</el-form-item>
<el-form-item label='单价' :prop="`details[${index}].price`" :rules='dailyUseRecordRules.price'>
<el-input v-model="item.price" autocomplete="off" style="width:130px;" :placeholder=dailyUseRecordMessage.price clearable></el-input>
<span>元</span><span v-show="item.spec === '' ? false : true" >/{{item.spec}}</span>
</el-form-item>
<el-form-item style="display:inline-block;">
<el-button icon='el-icon-delete' @click="delFoodDetail(index)"></el-button>
</el-form-item>
<el-form-item style="display:inline-block;" v-if="index === Number(dailyUseRecordForm.details.length)-1">
<el-button icon='el-icon-plus' @click="addFoodDetail"></el-button>
</el-form-item>
</el-form-item>
- sección Resumen de
forma dinámica la validación es la línea oficial dada para el caso del objeto de matriz tiene sólo una necesidad propiedad para verificar si tiene que atravesar el objeto de datos tiene varios atributos requiere autenticación, que tiene que hacer lo mismo que he descrito anteriormente modificación. Hay preguntas sobre mis amigos privadas pueden, vamos a discutir.
