vee-validate表單校驗的基本使用

今天主要記錄一下用vee-validate來進行表單校驗的幾個基本使用。包括最基礎的必填和長度校驗；異步請求服務的校驗（重名校驗），還有延遲校驗。如何引入等就不在這裏贅述了，直接進入主題。

1.必填和長度校驗

直接採用v-validate屬性進行配置，不一樣的校驗採用 ‘|’ 隔開。是否有報錯根據 errors.has('userName') 進行判斷，‘userName’對應的是表單的name屬性的值。

errors.first('userName)會展現表單校驗中第一個錯誤信息。

 <el-col :span="4" class="form-label">
        <label>用戶名</label>
  </el-col>
  <el-col :span="8">
        <el-input name="userName" v-model="userName" v-validate="'required|min:2|max:20'"></el-input>
        <span v-show="errors.has('userName')" class="error">{{ errors.first('userName') }}</span>
  </el-col>

 

結果以下：

從結果咱們能夠看到，校驗的錯誤信息是展現了，可是默認都是英文的，這個可能有時跟咱們實際開發的需求不是一致的。這個咱們能夠採用

vee-validate的國際化去進行中文的展現。可是這裏我要介紹的是另外一種方式，若是是系統只須要支持一種語言，我以爲用這種方式就能夠。

直接採用 errors.first('userName:required') 即 ‘字段名：校驗規則’  的方式進行判斷進而展現對應提示信息的方式。這個方式能夠讓表單在對應校驗不經過時展現咱們本身定義對應的個性化提示信息。

優勢是：配置簡單，方便實現個性化提示。

<el-col :span="4" class="form-label">
       <label>用戶名</label>
</el-col>
<el-col :span="8">
       <el-input name="userName" v-model="userName" v-validate="'required|min:2|max:20'"></el-input>
       <span v-show="errors.first('userName:required')" class="error">用戶名爲必填項</span>
       <span v-show="errors.first('userName:min')" class="error">用戶名的最小長度爲2</span>
       <span v-show="errors.first('userName:max')" class="error">用戶名的最大長度爲20</span>
</el-col>

 

 2.異步校驗 和延遲

異步校驗，主要就是兩部分，一個是校驗器的定義，一個是使用

定義部分：

import { Validator } from 'vee-validate';

const emailsDB = [
    'abcd@cc.com'
];
const isUnique = value => new Promise((resolve) => {
    setTimeout(() => {
        if (emailsDB.indexOf(value) === -1) {
            return resolve({
                valid: true
            });
        }

        return resolve({
            valid: false,
            data: {
                message: `${value} 已存在.`
            }
        });
    }, 200);
});

Validator.extend('unique', {
    validate: isUnique,
    getMessage: (field, params, data) => data.message
});

使用：

 <el-col :span="4" class="form-label">
     <label>郵箱</label>
 </el-col>
 <el-col :span="8">
      <el-input name="email" v-model="email" v-validate="'unique'" data-vv-delay="1000"></el-input>
      <span v-show="errors.first('email:unique')" class="error">重複</span>
 </el-col>

結果：

 

其中  data-vv-delay="1000"  就是延遲校驗的使用。1000即1000毫秒

如下是幾個例子的完整代碼：

<template>
    <div>
        <el-form name="myForm" novalidate>
            <el-row>
                <el-col :span="4" class="form-label">
                    <label>郵箱</label>
                </el-col>
                <el-col :span="8">
                    <el-input name="email" v-model="email" v-validate="'unique'" data-vv-delay="1000"></el-input>
                    <span v-show="errors.first('email:unique')" class="error">重複</span>
                </el-col>

                <el-col :span="4" class="form-label">
                    <label>用戶名</label>
                </el-col>
                 <el-col :span="8">
                    <el-input name="userName" v-model="userName" v-validate="'required|min:2|max:20'"></el-input>
                    <span v-show="errors.first('userName:required')" class="error">用戶名爲必填項</span>
                    <span v-show="errors.first('userName:min')" class="error">用戶名的最小長度爲2</span>
                    <span v-show="errors.first('userName:max')" class="error">用戶名的最大長度爲20</span>
                </el-col>
                <!-- <el-col :span="8">
                    <el-input name="userName" v-model="userName" v-validate="'required|min:2|max:20'"></el-input>
                    <span v-show="errors.has('userName')" class="error">{{ errors.first('userName') }}</span>
                </el-col> -->
                
            </el-row>
        </el-form>
    </div>
</template>
<script>
import { Validator } from 'vee-validate';

const emailsDB = [
    'abcd@cc.com'
];
const isUnique = value => new Promise((resolve) => {
    setTimeout(() => {
        if (emailsDB.indexOf(value) === -1) {
            return resolve({
                valid: true
            });
        }

        return resolve({
            valid: false,
            data: {
                message: `${value} 已存在.`
            }
        });
    }, 200);
});

Validator.extend('unique', {
    validate: isUnique,
    getMessage: (field, params, data) => data.message
});
export default {
    data() {
        return {
            email: '',
            userName: ''
        }
    }
}
</script>
<style scoped>
.form-label {
  text-align: right;
  padding-right: 10px;
}
.error {
  color: red;
}
</style>

完整代碼