vant表单检验里去掉输入框的前后空格

需求原因

在公司项目里碰到的问题，希望我对vant表单提交的数据进行空值处理，如果输入空格不让提交，并给出提示

解决思路

看项目里封装好的组件用到了Field的rules属性定义校验规则，想着添加一个校验函数，类似如下

// html
<van-form validate-first @failed="onFailed">
  <!-- 通过 pattern 进行正则校验 -->
  <van-field
    v-model="value1"
    name="pattern"
    placeholder="正则校验"
    :rules="[{ pattern, message: '请输入正确内容' }]"
  />
  <!-- 通过 validator 进行函数校验 -->
  <van-field
    v-model="value2"
    name="validator"
    placeholder="函数校验"
    :rules="[{ validator, message: '请输入正确内容' }]"
  />
  <!-- 通过 validator 进行异步函数校验 -->
  <van-field
    v-model="value3"
    name="asyncValidator"
    placeholder="异步函数校验"
    :rules="[{ validator: asyncValidator, message: '请输入正确内容' }]"
  />
  <div style="margin: 16px;">
    <van-button round block type="info" native-type="submit">提交</van-button>
  </div>
</van-form>


// js
import { Toast } from 'vant';

export default {
  data() {
    return {
      value1: '',
      value2: '',
      value3: '',
      pattern: /(^\S+$)/g,
    };
  },
  methods: {
    // 校验函数返回 true 表示校验通过，false 表示不通过
    validator(val) {
      validator:(val)=>{
	     return /(^\S+$)/g.test(val)
      }
      ,message: "请不要输入空格"
    },
    // 异步校验函数返回 Promise
    asyncValidator(val) {
      return new Promise((resolve) => {
        Toast.loading('验证中...');

        setTimeout(() => {
          Toast.clear();
          resolve(/(^\S+$)/g.test(val));
        }, 1000);
      });
    },
    onFailed(errorInfo) {
      console.log('failed', errorInfo);
    },
  },
};

但是校验规则只能起到校验的作用，如果输入的全部都是空格，可以提示输入不正确，如果是输入的内容开头或结尾有空格，我们不想把空格提交，这时提示重新输入显得交互很智障，所以我们需要将输入内容前后的空格去掉后提交

方法就是直接在v-model上加个.trim修饰符

v-model.trim="editFormData[item.prop]"

这样v-mode绑定的数值就是去除前后空格后的数值