1. Descripción del problema
A continuación se muestran algunos problemas causados por la verificación de una regla de conmutación dinámica, resueltos como se muestra a continuación.
1. Verificación dinámica de reglas vinculantes
Aquí existe un requisito para cambiar dinámicamente la radio y verificar el cuadro de entrada. La interfaz es la siguiente
Busqué en Internet y utilicé el primer método para resolverlo: agregar reglas de verificación dinámicamente. El método es el siguiente
<el-form-item label="授权密匙(Key)" v-if="form.value.platformType === 2" prop="value.hundredApiKey" :rules="form.value.platformType === 2 ? rules.hundredApiKey:[{ required: false}]">
<el-col :span="10">
<el-input v-model="form.value.hundredApiKey" placeholder="请输入授权密匙(Key)" />
</el-col>
</el-form-item>
Úselo if para juzgar si el tipo de plataforma es igual a 2, y luego agregue reglas, reglas.hundredApiKey y requerido: falso, vea lo que se dice en Internet más adelante, puede lograr efectos dinámicos directamente a través de v-if, no es necesario para agregarla más tarde a través de :rules, no se mostrará. Esta regla está deshabilitada de forma predeterminada.
// 表单校验
rules: {
hundredApiKey: [{
required: true, message: "快递100 API Key不能为空", trigger: ['blur','change']}]
}
2. El problema de las reglas y la forma vinculante
Aquí se encuentran otros problemas, es decir, la entrada obviamente tiene un valor, pero simplemente indica que el valor de entrada no puede estar vacío, lo que se puede eliminar de acuerdo con los siguientes pasos:
:model="ruleForm" 绑定的ruleForm值是否挂载成功并且操作的是否是这个表单。
:rules="rules" 校验的规则格式绑定的rules是否定义并且格式正确为对象数组。
el-form-item中的prop="name"是否和rules中的name: [ {
required: true, message: '请输入活动名称', trigger: 'blur' }, ], 的名称一致，两个name是相同的，element的校验就是根据这个prop找对应的输入框的。
<el-input v-model="ruleForm.name"></el-input> 的v-model="ruleForm.name"确保对象ruleForm中有name这个属性！
Aviso:
Si el nivel de datos de sus reglas y el enlace de formulario es el mismo, como se muestra a continuación
<el-form :model="form" :rules="rules" ref="form">
<el-form-item label="选项：" prop="name">
<el-select v-model="form.name">
<el-option label="测试一" value="1"></el-option>
<el-option label="测试二" value="2"></el-option>
</el-select>
</el-form-item>
</el-form>
form:{
name:'',
},
rules:{
name:[{
required: true, message: '请选择', trigger: 'blur'}]
}
El enlace anterior no es un problema, uso el siguiente formato
form:{
a:{
name:'',
}
},
Hay un atributo de nombre en un objeto. Vincularlo de la forma anterior no funcionará. La forma correcta es la siguiente. Hay dos soluciones:
Solución 1: al definir y vincular reglas, la estructura de reglas es consistente con la estructura de datos
<el-form :model="form" :rules="rules" ref="form">
<el-form-item label="选项：" prop="a.name">
<el-select v-model="form.a.name">
<el-option label="测试一" value="1"></el-option>
<el-option label="测试二" value="2"></el-option>
</el-select>
</el-form-item>
</el-form>
form:{
a:{
name:'',
}
},
rules:{
'a.name':[{
required: true, message: '请选择', trigger: 'blur'}]
}
Solución 2: modifique el objeto de datos vinculado al formulario para que sea un subobjeto del objeto.
<el-form :model="form.a" :rules="rules" ref="form">
<el-form-item label="选项：" prop="name">
<el-select v-model="form.a.name">
<el-option label="测试一" value="1"></el-option>
<el-option label="测试二" value="2"></el-option>
</el-select>
</el-form-item>
</el-form>
form:{
a:{
name:'',
}
},
rules:{
name:[{
required: true, message: '请选择', trigger: 'blur'}]
}
3. La verificación de reglas usando v-if no es válida
Si hay varios componentes en el formulario anterior, solo uno es válido y todas las demás reglas de validación no son válidas.
<el-form-item label="选项：" prop="name">
Este problema me ha preocupado durante mucho tiempo. Encontré esta regla en el proceso de depuración más tarde. Encontré la respuesta en Internet. Solo necesito agregar el atributo clave.
<el-form-item label="选项：" prop="name" key="name">