如何实现项目内全部符合的el-form组件去除空格

Question

问题：现在，我有许多个后台小项目，然后嵌套在无界框架里面，然后封装了element组件中的el-form，然后el-form中有el-input，然后我现在要做的操作就是，把整个无界项目内的所有子项目中的el-form中的el-input全部.trim去除前后的空格，由于所有input类型是通过一个config文件实现的，也就是说config文件内的type是啥，该input就是什么现在我想在外部写一个函数，然后传入参数，下面是我现在的代码，没有思路了

const quitTrim = (config: IForm, type: IFormType, indexList: [], errorInfoList?: [string]) => {
  config.formItems.forEach((item: IFormItem) => {
    if (item.type === type) {
      if (!item.rules) {
        item.rules = [];
      }
      item.rules.push({});
      indexList.forEach((item) => {
        console.log(item);
      });
    }
  });
};

Answer 1

要实现项目内全部符合的el-form组件去除空格，你可以使用Element UI的表单验证规则（rules）来定义一个自定义的验证函数。在这个函数中，你可以使用JavaScript的trim()方法来去除字符串的前导和尾随空格。
以下是一个示例代码，演示如何实现这个功能：

<template>  
  <el-form :model="form" :rules="rules" ref="form">  
    <!-- 表单元素 -->  
  </el-form>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      form: {  
        // 表单数据  
      },  
      rules: {  
        // 表单验证规则  
        field: [  
          { validator: this.trimSpaceValidator, trigger: 'blur' }  
        ]  
      }  
    };  
  },  
  methods: {  
    trimSpaceValidator(rule, value, callback) {  
      if (value === '') {  
        callback(new Error('不能为空'));  
      } else {  
        let trimmedValue = value.trim();  
        if (trimmedValue !== value) {  
          callback(new Error('不能包含空格'));  
        } else {  
          callback();  
        }  
      }  
    }  
  }  
};  
</script>

在上面的代码中，我们定义了一个名为trimSpaceValidator的方法作为自定义的验证函数。这个函数会在field字段失去焦点时触发，并使用trim()方法去除字符串的前导和尾随空格。如果去除空格后的值与原值不同，说明该字段包含了空格，此时会返回一个错误信息。否则，验证通过。

通过将这个自定义验证函数添加到rules对象中的相应规则中，我们可以确保el-form组件在验证时去除字符串的空格。