element-ui-verify使用

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

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

1 import elementUIVerify from 'element-ui-verify'
2 
3 // 註意使用之前必須要先use elementUI
4 Vue.use(elementUIVerify)

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

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

預設支持的校驗規則

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

其他關鍵字說名

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

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

emptyMessage：空檢測錯誤提示；

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

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

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

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

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

表單內容為：

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

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

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

 1 <template>
 2   <el-form :model="model">
 3     <el-form-item label="密碼" prop="pass1" verify>
 4       <el-input v-model="model.pass1"></el-input>
 5     </el-form-item>
 6     <el-form-item label="確認密碼" prop="pass2" :verify="verifyPassword" :watch="model.pass1">
 7       <el-input v-model="model.pass2"></el-input>
 8     </el-form-item>
 9   </el-form>
10 </template>
11 <script>
12 export default{
13   data () {
14     return {
15       model: {
16         pass1: '',
17         pass2: ''
18       }
19     }
20   },
21   methods: {
22     verifyPassword (rule, val, callback) {
23       if (val !== this.model.pass1) callback(Error('兩次輸入密碼不一致!'))
24       else callback()
25     }
26   }
27 }
28 </script>