element-ui自定義表單校驗規則及常用表單校驗

前言

表單校驗是註冊環節中必不可少的操作，表單校驗可以提醒使用者填寫資料規則以確保使用者提交資料的效性，也可以防止使用者因誤操作、填寫錯誤資料或者惡意提交資料而佔用伺服器資源。

ElementUI校驗規則

ElementUI封裝了元件el-form來收集、校驗和提交資料，其中的rules屬性就是用來做資料校驗的。ElementUI提供了一些常用的表單驗證規則，我們可以直接使用該規則來實現資料校驗。rules根據rules給出的規則會對prop中的值進行校驗，當不滿足要求時會彈出message相應的提示資訊。

自定義規則呼叫

ElementUI提供的表單驗證規則是有限的，可能無法滿足我們專案的需求這時候就需要我們來自定義驗證規則。我們在在data() {}中新增自定義的校驗規則，然後在在data的return中通過validator引用校驗規則。data() {return{}}中定義的rules要 中的 :rules 屬性值相同，rules中的物件userName要與與 中的prop屬性值相同。

自定義校驗規則

validate是ElementUI封裝用於對整個表單進行驗證的，引數是一個回撥函式。該回撥函式在校驗結束後被呼叫，是否校驗成功和未通過校驗的欄位。這個回撥函式的原型為：function fun(rule, value, callback, source, options){}，其中rule指向當前的規則物件，value是需要進行校驗的值，callback是驗證之後的執行回撥，source是跟value的值一致的鍵值物件（可以忽略），options是個額外的配置選項（可選）。所以常見的函式定義如下，校驗手機號碼是否正確。

validate校驗

自定義校驗方法是一個在校驗結束後才會被呼叫回撥函式，所以在提交表單的時候我們需要通過$refs來呼叫validate來繼續自定義校驗。自定義校驗規則時必須保證每個分支都呼叫了callback方法，否則會導致el-form元件在使用validate方法時無法進入回撥函式。呼叫validate()校驗時需要prop屬性繫結校驗的欄位名，否則無法校驗v-model中繫結的值。

常用校驗規則

為了方便我們還是定義一個validation.js檔案來專門定義常用的校驗方法，然後匯入validation.js進而使用。這裡注意自定義rules時外層的message高於callback中的錯誤提示，所以自定義規則時建議外層勿定義message，可以用兩個規則來校驗內容。定義好之後在需要用到的地方直接 import 引入，然後在 rules 校驗中加入即可。

附上本文用到的原始碼

<template>
  <el-form
    :model="loginForm"
    autocomplete="on"
    class="login-form"
    :rules="rules"
  >
    <el-form-item prop="username" label="使用者名稱">
      <el-input
        placeholder="請輸入使用者名稱"
        name="username"
        type="text"
        v-model="loginForm.username"
        autocomplete="on"
      />
    </el-form-item>
  </el-form>
</template>
<script>

//JavaScript->
rules: {  username: [    { required: true, message: '請輸入使用者名稱', trigger: 'blur' },
    { min: 3, max: 5, message: '長度在 3 到 5 個字元', trigger: 'blur' }
  ]
}
//JavaScript
data(){  
    const chackLen = (rule, value, callback) => {  
         let len = value.length  
          if ( len < 3 || len > 5) {
    callback(new Error('使用者名稱長度在3-5之間'))  
     } else {   
          callback()  
          } 
        }
   return{ 
        rules: { 
              username: [   
                   { required: true, message: '請輸入使用者名稱', trigger: 'blur' },
                   { validator: chackLen, trigger: 'blur' }  // 自定義長度校驗
                   ]
  } }
  
methods: {  
  onSubmit() {       
     this.$refs['rulesForm'].validate(valid => {
        if (valid) {  
           //如果校驗為真說明符合要求可以繼續           
            
        }else{         
          //反正說明校驗失敗，返回對應的message       
            
            }    
             });  
      } 
      }
            
let matching = (value, callback, reg, message) => {  
    if (value === '' || value === undefined || value == null){   
         callback(new Error(message))  
         } else {   
              if (!reg.test(value)) {    
                    callback(new Error(message))  
                 } else {   
                  callback()  
                    } 
 }
 }

module.exports = {
    Username(rule, value, callback) {
        let reg = /^(?![0-9]*$)(?![a-zA-Z]*$)[a-zA-Z0-9]{6,12}$/
        matching(value, callback, reg, '請輸入6-12位字母和數字組合')
    }, SimplePwd(rule, value, callback) {
        let reg = /^[_a-zA-Z0-9]+$/
        matching(value, callback, reg, '包含英文字母、數字及下劃線組成')
    }, ComplexPwd(rule, value, callback) {
        let reg = /^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$)([^\u4e00-\u9fa5\s]){8,20}$/
        matching(value, callback, reg, '請輸入8-20位英文字母、數字或者符號')
    }, Phone(rule, value, callback) {
        let reg = /^[1][3, 4, 5, 6, 7, 8][0-9]{9}$/
        matching(value, callback, reg, '請輸入正確的手機')
    }, Email(rule, value, callback) {
        let reg = /^([a-zA-Z0-9]+[-_\.]?)+@[a-zA-Z0-9]+\.[a-z]+$/
        matching(value, callback, reg, '輸入正確的郵箱')
    }, IdCard(rule, value, callback) { let reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/ 
       matching(value, callback, reg, '輸入正確的身份證號碼') }, Company(rule, value, callback) {
        let reg = /^[A-Z0-9]{8}-[A-Z0-9]$|^[A-Z0-9]{8}-[A-Z0-9]-[0-9]{2}$/
        matching(value, callback, reg, '請輸入正確的營業執照')
    }, Weixin(rule, value, callback) {
        let reg = /^[a-zA-Z][a-zA-Z0-9_-]{5,19}$/
        matching(value, callback, reg, '請輸入正確的微訊號')
    }, Integer(rule, value, callback) {
        let reg = /^[1-9][0-9]*$/
        matching(value, callback, reg, '請輸入正確的整數')
    }, Number(rule, value, callback) { let reg = /^\d+$|^\d+[.]?\d+$/  
          matching(value, callback, reg, '請輸入純數字') }, 
          Landline(rule, value, callback) { 
        let reg = /^(\d{3,4}-)?\d{7,8}$/   
         matching(value, callback, reg, '請輸入正確的座機') 
     },
          Ip(rule, value, callback) {
               let reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/  
          matching(value, callback, reg, '請輸入正確的IP')
     },
         Price(rule, value, callback) { let reg = /^-?\d{1,4}(?:\.\d{1,2})?$ /  
         matching(value, callback, reg, '請輸入正確的價格') 
    }, 
         BankCard(rule, value, callback) { 
        let reg = /^([1-9]{1})(\d{14}|\d{18})$/   
         matching(value, callback, reg, '請輸入正確的銀行卡') }
}