element-ui-verify使用

　　element-ui-verify是對ElementUI原本的校驗封裝之后的插件，並不會影響使用ElementUI的原生校驗。

使用環境為vue+element-ui+webpack模塊環境，首先使用淘寶鏡像安裝cnpm install -s element-ui-verify，安裝之后在main.js中引入並使用

 

import elementUIVerify from 'element-ui-verify'

// 注意使用之前必須要先use elementUI
Vue.use(elementUIVerify)

 

main.js使用之后就可以直接在el-form-item標簽上使用校驗規則了，例如下面代碼表示內容大於0的校驗：

<el-form-item label="年齡" prop="age" verify int :gt="0">
      <el-input v-model.number="model.age"></el-input>
</el-form-item>

默認支持的校驗規則

length	校驗文本長度
minLength	校驗文本最短長度
gt	校驗數字要大於某數
gte	校驗數字要大於等於某數
lt	校驗數字要小於某數
lte	校驗數字要小於等於某數
maxDecimalLength	校驗數字最大小數位
number	校驗是否為數字
int	校驗是否為整數
phone	校驗是否為手機號（隨着號段的增加，未來可能需要更新）
email	校驗是否為電子郵件地址
verifyCode	校驗是否為6位數字驗證碼

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

使用這個插件，verify是必須的，如果想使用原生的elementUI校驗規則就不需要寫verify。

其他關鍵字說名

canBeEmpty：可以為空，當不為空時又需要校驗；

space：使用該關鍵字時空格也參加校驗；

emptyMessage：空檢測錯誤提示；

errorMessage：自定義校驗不通過提示；

<el-form-item prop="numberProp" verify number error-message="請輸入正確的數字"></el-form-item>

alias：復用錯誤提示，插件默認值："該輸入項"，使用這個關鍵字可以｛alias｝不能為空

例如空檢測錯誤提示模板為：

{empty: '{alias}不能為空'}

表單內容為：

<el-form-item prop="unknown" verify></el-form-item>
<el-form-item alias="姓名" prop="name" verify></el-form-item>
<el-form-item label="地址" prop="address" verify></el-form-item>

• 當unknown輸入框為空時，會提示"該輸入項不能為空"（alias值默認為"該輸入項"）
• 當姓名輸入框為空時，會提示"姓名不能為空"（顯式設置了alias值時，提示內容自然會以該值去替換模板)
• 當地址輸入框為空時，會提示"地址不能為空"（大部分el-form-item都需要設置一個label項，而label項往往就代表該輸入項的alias，因此插件會取該值直接作為alias）

watch：監聽其他變量觸發自身校驗，例如修改密碼

<template>
  <el-form :model="model">
    <el-form-item label="密碼" prop="pass1" verify>
      <el-input v-model="model.pass1"></el-input>
    </el-form-item>
    <el-form-item label="確認密碼" prop="pass2" :verify="verifyPassword" :watch="model.pass1">
      <el-input v-model="model.pass2"></el-input>
    </el-form-item>
  </el-form>
</template>
<script>
export default{
  data () {
    return {
      model: {
        pass1: '',
        pass2: ''
      }
    }
  },
  methods: {
    verifyPassword (rule, val, callback) {
      if (val !== this.model.pass1) callback(Error('兩次輸入密碼不一致!'))
      else callback()
    }
  }
}
</script>

 自定義校驗規則

開發中如果自帶的校驗規則滿足不了需求，我們通常將在全局自定義校驗規則，首先在src目錄下新建文件夾，我的文件夾叫verifyRule，文件夾中新建index.js文件，通過模塊化導出校驗規則。

export default [{
    rule: {
      name: 'blacklist',
    },
    ruleMethod: () => ({
      validator(rule, val, callback) {
        let windowvue = window.vue;
        windowvue.$http.post('校驗接口',{searchKey: val}).then(function(result){
          if(result){
            callback(new Error('錯誤提示信息));
          }else{
            callback();
          }
        });
      }
    })
  }
];

然后在main.js里遍歷添加校驗規則

import ElementUIVerify from 'element-ui-verify'
Vue.use(ElementUIVerify)
// node中如果包下無法通過package.json找到main會自動讀取包下的index.js文件
import  verifyrules from '@/verifyRule'

verifyrules.forEach(item => {
  ElementUIVerify.addRule(item.rule, item.ruleMethod);
})

添加之后就可以在項目中通過‘blacklist‘使用自定義的校驗規則。

<el-form-item label="身份證號" prop="customerCardNO" verify blacklist ></el-form-item>