「已注销」 2023-08-31 15:42 采纳率: 50%
浏览 4

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

问题:现在,我有许多个后台小项目,然后嵌套在无界框架里面,然后封装了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);
      });
    }
  });
};

img

img

  • 写回答

2条回答 默认 最新

  • qq_37749055 2023-08-31 16:08
    关注

    要实现项目内全部符合的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组件在验证时去除字符串的空格。

    评论

报告相同问题?

问题事件

  • 创建了问题 8月31日

悬赏问题

  • ¥35 用python实现除法算法中goldschmidt算法
  • ¥15 汇编代码转换成C代码
  • ¥15 除法算法中的归一化具体是怎么变的?
  • ¥20 集成电路的逻辑电路和晶体管简化图
  • ¥15 下载windows builder后的问题
  • ¥15 按要求对程序的逻辑进行更正
  • ¥50 悬赏帮写C++编程 诚信
  • ¥15 端口连接数为什么会有限制
  • ¥15 安卓数据提交之后格式不对
  • ¥15 需要数据库运行的图片