vue表單驗證 -- mmj-vue-vd

某某講啊發表於2019-08-30
Vue

起因

正在做的專案使用input比較多，基本每個input需要做輸入校驗，一個個校驗比較麻煩，這明顯與程式設計師的思想相悖。於是就開始了挖坑之旅！在公司大佬的指導下，終於完成了一個較簡單的vue表單驗證外掛。

安裝

  npm install mmj-vue-vd
複製程式碼

使用

  1. 在vue腳手架的main.js裡引入

      import vd from 'mmj-vue-vd
複製程式碼
      Vue.use(vd) 
複製程式碼

  2. 在vue檔案中使用

    • data裡 submitOk: [] ->同組input繫結同意陣列
    • 寫入指令
        <input type="text" v-vd="{rule:['numberInterval(1, 100)', 'required'],bind:'submitOk'}"  v-model="msg">
複製程式碼
    • 提交表單時進行校驗 var result = this.submitOk.$check() 返回值true/false 成功/失敗
    • 清除提示資訊 el.clear() el指當前元素，可用ref獲取

  3. 引數

    • rule: 校驗規則陣列
    • bind: 繫結的陣列元素
    • nothing: 是否為非必填項

  4. 樣式修改

    • 輸入框樣式修改：通過暴露出來的className-> error_input修改，修改border需!important
    • 錯誤提示樣式修改： 通過暴露出來的className-> error_msg修改，修改字型大小、顏色、偏移需!important

  5. 自定義規則

    • 使用customize方法自定義規則或則修改規則

校驗規則

  required: '不為空',</br>
  number: '請填入數字',</br>
  znumber: '請輸入正數',</br>
  fnumber: '請輸入負數',</br>
  notznumber: '請輸入非正數',</br>
  notfnumber: '請輸入非負數',</br>
  integer: '請輸入整數',</br>
  pInteger: '請輸入正整數',</br>
  nInteger: '請輸入負整數',</br>
  notpInteger: '請輸入非正整數',</br>
  notnInteger: '請輸入非負整數',</br>

  chinese: '請輸入中文',</br>
  email: '請輸入郵箱地址',</br>
  url: '請輸入連結地址',</br>
  postCode: '請輸入郵編地址',</br>
  idCard: '請輸入身份證號',</br>

  numberInterval: '兩個數之間'</br>
複製程式碼

注意

  1. 使用v-for遍歷input時，不可使用index作為key值，需使用唯一值作為key值
  2. 儘量同一提交表單繫結同一個陣列物件
  3. 必填優先順序高於非必填，即require > nothing
  4. $check() 可傳一個布林值做引數，true驗證所有，false知道有一個驗證失敗就停止，預設false

使用例項

  1. html

由於外掛是基於vue指令的，所以在使用的時候只需使用外掛命令即可。

    <div class="input_group">
     <label>非必填項</label>
     <input class="input" type="text" value="" v-vd="{rule:['number'],bind:'submitOk', nothing: 'nothing'}">
    </div>
    <div class="input_group">
      <label>必填項</label>
      <input class="input" type="text" value="dsfg" v-vd="{rule:['required'],bind:'submitOk'}">
    </div>
    <div class="input_group">
      <label>填入數字</label>
      <input class="input" type="text" value="dsfg" v-vd="{rule:['required', 'number'],bind:'submitOk'}">錯誤資訊在最後提示
    </div>
    <div class="input_group">
      <label>填入數字</label>
      <span>
        <input class="input" type="text" v-model="dsfg" v-vd="{rule:['required', 'number'],bind:'submitOk'}">
      </span>用元素包裹input時，提示資訊顯示位子
    </div>
複製程式碼
  1. js

使用一個陣列來繫結同一批次需要驗證的表單

data () {
  return {
    msg: '3221',
    submitOk: []
  }
}
複製程式碼
  1. 效果

vue表單驗證 -- mmj-vue-vd
4. 自定義規則 main.js

由於業務需求的不同，外掛提供了自定義驗證規則的方法來提升外掛的靈活性，customize(name, text, callback)

 name: 規則名，必傳
 text: 提示語，必傳
 callback: 驗證函式， 非必傳
複製程式碼

自定義最大輸入長度限制，帶有引數，則提示詞中使用變數需用"{{}}"包裹

vd.customize('maxLen(len)', '最大長度為{{len}}', function(val, args) {
  return val.length <= args[0]
})
複製程式碼

如果已存在此規則，則會覆蓋原有規則

vd.customize('required', '內容不能為空')
複製程式碼

最後

專案原始碼在這裡，大家可以自行去看原始碼（簡單易懂），這也是我沒有寫原始碼實現的原因，我希望感興趣的朋友可以從這個簡單的外掛中學會看原始碼。如果有疑問或者更好的想法可以和我交流一波，大家共同進步，當然，能點個贊就更好了。

相關文章