通過Element實現表單驗證

Element是一個基於Vue.js 2.0的桌面端組件庫。它提供了豐富的組件，包括表單組件。本文將從多個方面闡述如何通過Element實現表單驗證。

一、為表單添加驗證規則

通過在表單元素上綁定rules屬性，可以為表單添加驗證規則。

  
    <el-form-item label="用戶名" prop="name">
      <el-input v-model="form.name" name="name" :rules="[ { required: true, message: '請輸入用戶名', trigger: 'blur' }]" />
    </el-form-item>
  

上述代碼中prop屬性的值為表單元素的欄位名，rules屬性的值為對該欄位的驗證規則。在這個例子中，必填的驗證規則為required，提示信息為「請輸入用戶名」，驗證觸發方式為blur即失去焦點觸發。還可以設置其它的驗證規則，如最小長度、最大長度、正則表達式等等。

二、動態修改驗證規則

Element提供了一組hook屬性，可以讓我們在驗證過程中進行一些動態的修改行為。這些hook分別是validator、validate、validateFailed。

validator：在表單值發生變化時觸發，可以動態設置表單的驗證規則。

  
    <el-form-item label="手機號" prop="tel">
      <el-input v-model="form.tel" name="tel" :rules="[ { required: true, message: '請輸入手機號', trigger: 'blur' }]" @blur="checkPhone" />
    </el-form-item>
  

  
    methods: {
      checkPhone() {
        if(/^(13[0-9]|14[5-9]|15[0-3,5-9]|16[2567]|17[0-8]|18[0-9]|19[89])\d{8}$/.test(this.form.tel)) {
          this.$refs.form.validateField('tel');
        } else {
          this.$refs.form.validateField('tel', '手機號格式不正確');
        }
      }
    }
  

在這個例子中，我們為手機號添加了一個額外的驗證方法checkPhone。如果手機號不符合格式，我們可以通過調用validateField方法動態設置一個錯誤信息，這樣就可以避免彈出一個不必要的提示框。

三、自定義驗證規則

如果Element提供的驗證規則不能夠滿足我們的需求，我們可以通過自定義驗證規則來滿足我們的需求。

  
    Vue.component('el-phone', {
      template: '<el-input v-model="value" :placeholder="placeholder" :readonly="readonly" :disabled="disabled" :maxlength="maxlength" @change="handleChange" />',
      props: {
        value: { type: String, default: '' },
        placeholder: { type: String, default: '請輸入電話號碼' },
        readonly: { type: Boolean, default: false },
        disabled: { type: Boolean, default: false },
        maxlength: { type: Number, default: 11 },
      },
      methods: {
        handleChange(e) {
          const value = e.target.value;
          if(!/^(13[0-9]|14[5-9]|15[0-3,5-9]|16[2567]|17[0-8]|18[0-9]|19[89])\d{8}$/.test(value)) {
            this.$emit('input', '');
            this.$emit('error', '請輸入有效的手機號碼');
          } else {
            this.$emit('input', value);
            this.$emit('success', value);
          }
        }
      }
    });
  

在這個例子中，我們新增了一個名為el-phone的自定義組件。在handleChange方法里，我們使用了和前面介紹的動態驗證相同的方式，動態設置驗證結果。要使用這個組件，只需要在表單中綁定value屬性即可。

四、錯誤提示

Element提供了一套強大的錯誤提示機制，可以讓我們在表單出錯時及時發現問題，並提示出錯的原因。

  
    <el-form :model="form" :rules="rules" ref="form">
      <el-form-item label="手機號碼" prop="phone">
        <el-input v-model="form.phone" name="phone" placeholder="請輸入手機號碼" @blur="checkPhone" />
      </el-form-item>
      <el-form-item label="驗證碼" prop="code">
        <el-input v-model="form.code" name="code" placeholder="請輸入驗證碼" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :loading="submitting" @click="submit">提交</el-button>
      </el-form-item>
      <div slot="error">{{$refs.form?.$el?.querySelector?.('.el-form-item__error')?.textContent}}</div>
    </el-form>
  

在這個例子中，我們可以看到一個名為error的slot。在普通情況下，它是不會顯示的，只有在表單驗證不通過時，我們才會在這裡顯示錯誤信息。使用Element提供的querySelector方法，可以迅速地找到錯誤提示框。

五、圖形驗證碼驗證

圖形驗證碼是一種常見的用戶驗證方式，也是表單驗證方案中常見的一種方案。可以通過Element提供的el-image組件快速實現圖形驗證碼的驗證功能。

  
    <el-form-item label="圖形驗證碼" prop="imageCode">
      <el-input v-model="form.imageCode" name="imageCode" placeholder="請輸入驗證碼" />
      <el-image src="/api/randCode.php" style="width: 100px;height: 40px;margin-left: 1rem;" @click.native="changeRandCode" :key="randCode" />
    </el-form-item>
  

在這個例子中，我們可以看到一組圖形驗證碼的實現方式。在點擊驗證碼時，我們會刷新一個新的驗證碼，從而完成驗證的過程。

六、總結

通過本文的介紹，我們可以看到Element是一個非常棒的表單組件庫，為我們提供了無數的組件和介面，可以讓我們完成各種各樣的表單驗證任務。希望本文對讀者有所幫助，也希望讀者們在開發中能夠加以應用。