ElementUI表單校驗解析

   今天在項目中遇到了一個需求，大致的內容爲爲表單添加信息校驗。當然了，其實後端也可以實現，但出於用戶體驗考慮，前端也需要對其進行信息的校驗並給予正確的提示。因爲項目用到的UI框架爲elementUi，所以首先想到的是用elementUi對錶單進行校驗。完成後的內容如下:

考慮到element有多種對錶單的校驗，由此整理了大致的三種表單校驗：

在實現之前我們需要對錶單進行一系列的前置操作

1. ref="editShop" 設置表單名稱
2. :rules="editShopRules" 設置規則
3. :model="form" 綁定的data數據
4. prop="customShopName" 每個表單項對應的名稱
5. 在data中建立相對應的rules 與之前的 :rules 名稱相對應

• 原生表單校驗

簡述：這是最普通的表單校驗

特點：簡約簡潔，但驗證的範圍比較小，只適合小範圍校驗（如字數必須性等）

• 正則單校驗

簡述：可以添加正則校驗的形式校驗表單

特點：需要了解正則原理，可以應付大多數校驗，需要通過不停的測試和計算得到正確結果

• 自定義方法校驗

簡述：通過自定義方法的形式實現校驗

特點：可以應對複雜的校驗情況，可以自定義計算邏輯輸出對應的內容。但是代碼量大，建議將校驗方法抽取出來

以下是完整代碼：

/** 檢查店鋪名稱 */
let checkShopName = (rule, value, callback) => {
      if (value === "默認店鋪") {
        callback(new Error("不可輸入'默認店鋪'"));
      } else {
        callback();
      }
};

editShopRules: { // 表單規則
        // 檢查店鋪名稱
          customShopName: [
            {required:true,message:'請輸入賬號',trigger:'blur'},
            {validator:checkShopName,trigger:'blur'}
          ],
          username: [
            { required: true, message: '請輸入店長姓名', trigger: 'blur' },
            { min: 3, max: 5, message: '長度在 3 到 5 個字符', trigger: 'blur' }
          ],
          phone: [
            { required: true, message: '請輸入聯繫方式', trigger: 'blur' },
            { pattern: /^1[34578]\d{9}$/, message: '目前只支持中國大陸的手機號碼', trigger: 'blur' }
          ]
        } 

我們可以使用手動校驗的形式對錶單進行整體校驗具體代碼如下：

// 修改商店檢查
    editShopCheck(){
      this.$refs['editShop'].validate((valid) => {
          if (valid) {
            // 執行表單提交
            this.editShop()
          } else {
            return false;
          }
      });
    },

其中'editShop'爲ref="editShop"中設置的表單名稱

同學們還有什麼校驗方法?留言評論吧