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

原由

正在作的項目使用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>
複製代碼

2. js

使用一個數組來綁定同一批次須要驗證的表單

data () {
  return {
    msg: '3221',
    submitOk: []
  }
}
複製代碼

3. 效果

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', '內容不能爲空')
複製代碼

最後

項目源碼在這裏，你們能夠自行去看源碼（簡單易懂），這也是我沒有寫源碼實現的緣由，我但願感興趣的朋友能夠從這個簡單的插件中學會看源碼。若是有疑問或者更好的想法能夠和我交流一波，你們共同進步，固然，能點個贊就更好了。