vue 表單檢驗裏去掉輸入框的前後空格

前言：vue裏寫表單校驗的時候，必填項輸入全是空格的時候，校驗依舊會通過，但是這不是我們所期望的，我們期望輸入全是空格的時候校驗必填項時依舊不通過，那麼我們就需要對值進行處理，去除其中的空格。很慶幸的是，vue有一個很簡單編輯的方法，直接去空格，不用每一個都去寫校驗邏輯，下面就是針對以上問題，寫的方法。

去空格之前的form表單

<div class="form-box">
      <el-form
        ref="formData"
        :model="detailData"
        :rules="rules"
        label-width="100px"
        class="card-ruleForm"
      >
        <el-form-item
          label="TEL"
          prop="telephone"
        >
          <el-col :span="6">
            <el-input
              v-model="detailData.telephone"
              placeholder="請輸入"
            />
          </el-col>
        </el-form-item>
        <el-form-item
          label="MAL"
          prop="email"
        >
          <el-col :span="6">
            <el-input
              v-model="detailData.email"
              placeholder="請輸入"
            />
          </el-col>
        </el-form-item>
        <el-form-item class="last-el-form-item">
          <el-button @click="handleCancle">取消</el-button>
          <el-button :loading="loading" type="primary" @click="onSubmit('formData')">提交</el-button>
        </el-form-item>
      </el-form>
    </div>

去空格之後的form表單

<div class="form-box">
      <el-form
        ref="formData"
        :model="detailData"
        :rules="rules"
        label-width="100px"
        class="card-ruleForm"
      >
        <el-form-item
          label="TEL"
          prop="telephone"
        >
          <el-col :span="6">
            <el-input
              v-model.trim="detailData.telephone"
              placeholder="請輸入"
            />
          </el-col>
        </el-form-item>
        <el-form-item
          label="MAL"
          prop="email"
        >
          <el-col :span="6">
            <el-input
              v-model.trim="detailData.email"
              placeholder="請輸入"
            />
          </el-col>
        </el-form-item>
        <el-form-item class="last-el-form-item">
          <el-button @click="handleCancle">取消</el-button>
          <el-button :loading="loading" type="primary" @click="onSubmit('formData')">提交</el-button>
        </el-form-item>
      </el-form>
    </div>

解決方法：

將v-model改爲v-model.trim即可