快捷導(dǎo)航

vue中vee validate表單校驗(yàn)的幾種基本使用

更新時(shí)間：2018年06月25日 08:27:26 作者：絕對(duì)小孩

這篇文章主要介紹了vee-validate表單校驗(yàn)的基本使用,需要的朋友可以參考下

今天主要記錄一下用vee-validate來(lái)進(jìn)行表單校驗(yàn)的幾個(gè)基本使用。包括最基礎(chǔ)的必填和長(zhǎng)度校驗(yàn)；異步請(qǐng)求服務(wù)的校驗(yàn)（重名校驗(yàn)），還有延遲校驗(yàn)。如何引入等就不在這里贅述了，直接進(jìn)入主題。

1.必填和長(zhǎng)度校驗(yàn)

直接采用v-validate屬性進(jìn)行配置，不同的校驗(yàn)采用 ‘|' 隔開(kāi)。是否有報(bào)錯(cuò)根據(jù) errors.has('userName') 進(jìn)行判斷，‘userName'對(duì)應(yīng)的是表單的name屬性的值。

errors.first('userName)會(huì)展示表單校驗(yàn)中第一個(gè)錯(cuò)誤信息。

 <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>

結(jié)果如下：

從結(jié)果我們可以看到，校驗(yàn)的錯(cuò)誤信息是展示了，但是默認(rèn)都是英文的，這個(gè)可能有時(shí)跟我們實(shí)際開(kāi)發(fā)的需求不是一致的。這個(gè)我們可以采用

vee-validate的國(guó)際化去進(jìn)行中文的展示。但是這里我要介紹的是另一種方式，如果是系統(tǒng)只需要支持一種語(yǔ)言，我覺(jué)得用這種方式就可以。

直接采用 errors.first('userName:required') 即 ‘字段名：校驗(yàn)規(guī)則' 的方式進(jìn)行判斷進(jìn)而展示對(duì)應(yīng)提示信息的方式。這個(gè)方式可以讓表單在對(duì)應(yīng)校驗(yàn)不通過(guò)時(shí)展示我們自己定義對(duì)應(yīng)的個(gè)性化提示信息。

優(yōu)點(diǎn)是：配置簡(jiǎn)單，方便實(shí)現(xiàn)個(gè)性化提示。

<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">用戶名為必填項(xiàng)</span>
  <span v-show="errors.first('userName:min')" class="error">用戶名的最小長(zhǎng)度為2</span>
  <span v-show="errors.first('userName:max')" class="error">用戶名的最大長(zhǎng)度為20</span>
</el-col>

2.異步校驗(yàn) 和延遲

異步校驗(yàn)，主要就是兩部分，一個(gè)是校驗(yàn)器的定義，一個(gè)是使用

定義部分：

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">重復(fù)</span>
 </el-col>

結(jié)果：

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

以下是幾個(gè)例子的完整代碼：

<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">重復(fù)</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">用戶名為必填項(xiàng)</span>
          <span v-show="errors.first('userName:min')" class="error">用戶名的最小長(zhǎng)度為2</span>
          <span v-show="errors.first('userName:max')" class="error">用戶名的最大長(zhǎng)度為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>

總結(jié)

以上所述是小編給大家介紹的vue中vee validate表單校驗(yàn)的幾種基本使用，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: