el-form-item内 循环el-form-item el-form-item输入内容了,但是失去叫焦点为什么会校验
时间: 2024-01-17 21:19:07 浏览: 39
el-form-item内循环el-form-item时,如果输入内容后失去焦点,仍然会进行校验的原因是因为el-form-item内部的el-form-item会继承父级el-form-item的校验规则。所以即使子级el-form-item输入了内容,但是失去焦点后,父级el-form-item仍然会进行校验。
为了解决这个问题,可以在子级el-form-item上添加`prop`属性,并将其设置为一个唯一的值,以避免继承父级校验规则。例如:
```html
<el-form-item prop="childFormItem">
<el-form-item>
<el-input v-model="inputValue"></el-input>
</el-form-item>
</el-form-item>
```
这样,子级el-form-item就会独立进行校验,不会受到父级el-form-item的影响。
相关问题
el-form-renderer 里面el-form-item校验 rules
el-form-renderer是一个基于Element UI的表单渲染器,用于简化表单的开发和校验。而el-form-item是el-form-renderer中的一个组件,用于包裹表单项并进行校验。
在el-form-item中,可以通过rules属性来定义校验规则。rules属性是一个数组,每个元素都是一个对象,用于描述一个校验规则。每个规则对象包含以下属性:
1. required(必填):指定该字段是否为必填项,可以是一个布尔值或者一个函数。如果是函数,则根据函数的返回值来确定是否必填。
2. validator(自定义校验函数):指定一个自定义的校验函数,该函数接收三个参数:rule(当前规则对象)、value(当前字段的值)和callback(回调函数)。在自定义校验函数中,可以根据具体的业务逻辑进行校验,并通过调用callback回调函数来返回校验结果。
3. trigger(触发方式):指定触发校验的方式,默认为'change',即在字段值改变时触发校验。还可以设置为'blur'(失去焦点时触发校验)或'submit'(表单提交时触发校验)。
4. message(错误提示信息):指定校验失败时的错误提示信息。
以下是一个示例代码,展示了如何在el-form-renderer中使用el-form-item进行校验规则的定义:
```html
<el-form-renderer :model="formData" :rules="formRules">
<el-form-item label="用户名" prop="username">
<el-input v-model="formData.username"></el-input>
</el-form-item>
</el-form-renderer>
```
```javascript
data() {
return {
formData: {
username: ''
},
formRules: {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
{ min: 6, max: 12, message: '用户名长度在6到12个字符之间', trigger: 'blur' }
]
}
};
}
```
el-form-item 循环校验
对循环校验 el-form-item,您可以通过使用 v-for 指令来循环生成多个 el-form-item,并设置不同的校验规则。下面是一个示例代码:
```html
<template>
<el-form>
<el-form-item v-for="(item, index) in formItems" :key="index" :prop="'field' + index" :rules="getRules(index)">
<el-input v-model="item.value"></el-input>
</el-form-item>
<el-button type="primary" @click="submitForm">提交</el-button>
</el-form>
</template>
<script>
export default {
data() {
return {
formItems: [
{
value: ''
},
{
value: ''
},
// 添加更多的表单项...
]
};
},
methods: {
getRules(index) {
return [
{ required: true, message: '此项不能为空', trigger: 'blur' },
// 添加更多的校验规则...
];
},
submitForm() {
this.$refs.form.validate((valid) => {
if (valid) {
// 校验通过,执行提交操作
// ...
} else {
// 校验失败,提示错误信息
// ...
}
});
}
}
};
</script>
```
在上述代码中,通过 v-for 指令循环生成了多个 el-form-item,并且根据索引设置了不同的校验规则。在 getRules 方法中,可以根据索引返回不同的校验规则数组。然后在 submitForm 方法中,通过 this.$refs.form.validate 进行表单校验,校验通过即可执行提交操作,否则提示错误信息。
请根据实际需求进行适当的修改和调整。希望对您有帮助!
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)