vue實現表單驗證規則

技術概述

在用戶輸入輸入數據時，經常要添加表單驗證規則，對於比較復雜的驗證規則在官方文檔中沒有明確的表述。

技術概述

1.流程圖

2.代碼實現
創建一個validate.js文件存放表單驗證規則

export function validateTelephone(rule, value, callback) {
  let val = new RegExp('/^1[34578]\d{9}$/').test(value)
  if (value && !val) {
    callback(new Error(rule.message || '請輸入正確手機號碼'))
  } else {
    callback()
  }
}

在被校驗文件中導入validate文件，調用驗證規則

import {validateTelephone} from '@/validator' 

<el-form  :model="form"  :rules="rules">
        <el-form-item label="電話" prop="TelephoneNumber">
            <el-input v-model="form.TelephoneNumber"autocomplete="off">
            </el-input>
        </el-form-item>
</el-form>

rules: {
        TelephoneNumber: [{required: true, validator: validateTelephone, tirgger: ['blur', 'change'] }]
      },

效果圖

碰到問題及解決方法

使用表單規則思路比較清晰，但是值得注意的一點是在驗證通過的時候還需要調用callback()函數,否則在提交表單的時候不會生效。

總結

表單驗證在前端開發的時候經常遇到，在這次實踐過程中學到了很多有關前端的知識，雖然都是一些比較基礎的內容，但也是一種自我提升。