vue elementui 表單驗證筆記

本篇文章基于 elementui

        form表單在前端行業中使用頻率可以說時非常之高了，element對于表單進行了封裝，做成了el-form元件，在form表單中驗證幾乎是必不可少的部分了，把自己了解到的記錄一下（肯定不全，以後再補充吧，也歡迎各路大佬幫忙補充）。

參數	取值	說明
required	true	必填
false	非必填
message	string	提示消息
trigger	blur	失去焦點
change	值發生改變
min	number	最小長度
max	number	最大長度
type	string	字元串
number	數字
boolean	布爾值
array	數組
date	日期
email	郵箱
validator	變量	自定義檢驗規則
pattern	正規表達式	自定義正則

使用的時候注意：

el-form 标簽中的 :rules 名字要和 retrun 中的一緻； el-form-item 中的 prop 與 :rules 中的數組名稱一緻； validator 屬性中自定義變量寫在 data 中， value 就是要驗證的值。

        自定義檢驗規則的一些坑：

        1. 不能直接return，必須傳回一個回調函數 callback() ；

                callback()參數為空代表驗證通過，傳回new Error("提示内容")代表驗證不通過

        2. 必須每個分支都調用了callback方法；

                這個問題就是if判斷的時候你必須有else，必須補全，不然無法執行；

<el-form ref="loginForm" :model="loginForm" :rules="rules" class="loginForm">
  <el-form-item label="賬号" prop="userName">
      <el-input type="text" v-model="loginForm.userName" placeholder="請輸入您的帳号"/>
  </el-form-item>
  <el-form-item label="密碼" prop="password">
      <el-input type="password" v-model="loginForm.password" placeholder="請輸入密碼"/>
  </el-form-item>
  <el-form-item label="郵箱" prop="email">
      <el-input type="text" v-model="loginForm.email" placeholder="請輸入郵箱"/>
  </el-form-item>
</el-form>
import {isPassword,isuser} from "@/utils/validate";
export default {
  data() {
    const username = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("使用者名不能為空"));
      } else {
        callback();
      }
    };
    return {
      loginForm:{
        userName: "",
        password: "",
        email: "",
      },
      rules:{
        userName:[
          {required:true,trigger:"blur",validator:username},
          // 必填，失去焦點觸發自定義判斷username
          {min:2,max:16,trigger:"change",message:"帳号格式錯誤"}
          // 長度在2-16之間，input值發生改變時都會觸發
        ],
        password:[
          {required:true,trigger:"blur",message:"密碼不能為空"},
          {pattern:/^[a-zA-Z0-9_]{6,16}$/,message:"密碼格式由字母、數字和下劃線組成，長度為6-16位",trigger:"change"}
          // 自定義正則驗證，input值改變觸發
        ],  
        email:[
          {required:true,trigger:"blur",message:"郵箱不能為空"},
          {type:'email',message:'請輸入正确的郵箱位址',trigger:['blur','change']}
          // 自帶驗證方式email，失去焦點時觸發
        ]
      }
    }
  },
}