el-form表单验证

### element UI el-form 表单验证右侧 Icon 显示方法 为了在 `el-form` 的表单验证过程中显示右侧图标，可以利用自定义插槽功能来实现这一需求。通过设置 `el-form-item` 组件中的 `slot="error"` 来插入特定的错误提示图标或成功状态图标。 当配置项中设置了 `show-message=false` 后，可以通过监听输入框的状态变化来自行控制图标的展示逻辑。下面是一个具体的例子： ```html <template> <div class="demo"> <el-form :model="ruleForm" status-icon ref="ruleForm" label-width="100px" class="demo-ruleForm"> <!-- 用户名 --> <el-form-item prop="name" :rules="[ {required: true, message: () => $t('name is required'), trigger: 'blur'} ]"> <el-input v-model="ruleForm.name"></el-input> <i slot="suffix" :class="{'el-icon-error': !isValid && hasBeenValidated,'el-icon-success': isValid}"></i> </el-form-item> <el-button type="primary" @click="submitForm('ruleForm')">Submit</el-button> </el-form> </div> </template> <script> export default { data() { return { ruleForm: { name: '' }, isValid: null, hasBeenValidated: false }; }, methods: { submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { alert('submit!'); } else { console.log('error submit!!'); this.hasBeenValidated = true; return false; } }); } } }; </script> ``` 在此示例中，每当提交按钮被点击时会触发 `submitForm()` 方法并执行验证操作；如果验证失败，则将 `hasBeenValidated` 设置为 `true` 并根据实际验证情况更新 `isValid` 属性值，从而动态调整右边图标的样式[^1]。 对于更复杂的场景比如嵌套于表格内的表单项，同样可以在对应的列模板里加入类似的结构以达到相同的效果[^2]。