痛點(diǎn)

Vant沒(méi)有提供內(nèi)置的表單驗(yàn)證航徙，但是Field輸入框提供了error、error-message這兩個(gè)API。
https://youzan.github.io/vant/#/zh-CN/field

image.png

<van-cell-group>
  <van-field
    v-model="username"
    label="用戶名"
    placeholder="請(qǐng)輸入用戶名"
    error
  />
  <van-field
    v-model="phone"
    label="手機(jī)號(hào)"
    placeholder="請(qǐng)輸入手機(jī)號(hào)"
    error-message="手機(jī)號(hào)格式錯(cuò)誤"
  />
</van-cell-group>

雖然這樣也可以自己手動(dòng)驗(yàn)證蓝仲，但是對(duì)于頁(yè)面中有多個(gè)驗(yàn)證時(shí)弄起來(lái)還是比較煩的办成，最好是能有一個(gè)驗(yàn)證插件統(tǒng)一搞定這一切泡态。

VeeValidate

基于上面的痛點(diǎn)，我在項(xiàng)目中使用了 VeeValidate 來(lái)作為驗(yàn)證插件迂卢，當(dāng)然還有一些其他的驗(yàn)證插件某弦，這個(gè)看個(gè)人喜好，你想用什么都可以而克，反正思路都是一樣的靶壮。

//VeeValidate的基礎(chǔ)用法
<input v-validate="'required|email'" name="email" type="text">
<span>{{ errors.first('email') }}</span>

https://baianat.github.io/vee-validate/guide/getting-started.html#basic-example

開(kāi)搞

1.安裝VeeValidate

npm install vee-validate --save

2.修改main

我這里是新建了一個(gè)validate.js文件來(lái)單獨(dú)處理的，因?yàn)槲疫€有一些其他自定義的驗(yàn)證员萍，如果只是測(cè)試直接在main.js中修改就好了腾降。

image.png

import Vue from "vue";
import VeeValidate, { Validator } from "vee-validate";
Vue.use(VeeValidate);

3.頁(yè)面中使用

<van-field
          v-model="form.contactPhone"
          v-validate="'required|mobile'"   //mobile是我自定義的
          name="contactPhone" //特別注意一定得給name
          :error-message="errors.first('contactPhone')" //錯(cuò)誤信息
          :error="errors.has('contactPhone')" //是否有錯(cuò)誤
          label="聯(lián)系人電話"
          placeholder="請(qǐng)輸入手機(jī)號(hào)碼"
        >

mobile自定義驗(yàn)證代碼，我也把常用的正則表達(dá)式整理了一下碎绎。https://form-validate.github.io/form-validate/

// 手機(jī)號(hào)碼驗(yàn)證
Validator.extend("mobile", {
  getMessage: () => `請(qǐng)輸入正確的手機(jī)號(hào)碼`,
  validate: value =>
    value.length === 11 &&
    /^(((13[0-9]{1})|(14[57]{1})|(15[012356789]{1})|(17[03678]{1})|(18[0-9]{1})|(19[89]{1})|(16[6]{1}))+\d{8})$/.test(
      value
    )
});

4. 查看效果

image.png

5. 漢化

import zh_CN from "vee-validate/dist/locale/zh_CN";
Validator.localize("zh_CN", zh_CN);

image.png

6. 搞掉丑陋的提示

先去看官網(wǎng)的中文文件是怎么寫的，然后進(jìn)行修改
https://github.com/baianat/vee-validate/blob/master/locale/zh_CN.js

image.png

7. 完整代碼---validate.js文件

import Vue from "vue";
import VeeValidate, { Validator } from "vee-validate";

Vue.use(VeeValidate);

const formatFileSize = function(size) {
  let units = ["Byte", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
  let threshold = 1024;
  size = Number(size) * threshold;
  let i = size === 0 ? 0 : Math.floor(Math.log(size) / Math.log(threshold));
  return (size / Math.pow(threshold, i)).toFixed(2) * 1 + " " + units[i];
};
const fieldName = ""; //原來(lái)的i18n的fieldName會(huì)顯示綁定的name值，就是英文走诞，實(shí)際項(xiàng)目中不需要

Validator.localize("zh_CN", {
  name: "zh_CN",
  attributes: {},
  messages: {
    _default: () => `${fieldName}無(wú)效`,
    after: (field, [target]) => `${fieldName}必須在${target}之后`,
    alpha_dash: () => `${fieldName}能夠包含字母數(shù)字字符副女、破折號(hào)和下劃線`,
    alpha_num: () => `${fieldName}只能包含字母數(shù)字字符`,
    alpha_spaces: () => `${fieldName}只能包含字母字符和空格`,
    alpha: () => `${fieldName}只能包含字母字符`,
    before: (field, [target]) => `${fieldName}必須在${target}之前`,
    between: (field, [min, max]) => `${fieldName}必須在${min}與${max}之間`,
    confirmed: (field, [confirmedField]) =>
      `${fieldName}不能和${confirmedField}匹配`,
    credit_card: () => `${fieldName}格式錯(cuò)誤`,
    date_between: (field, [min, max]) => `${fieldName}必須在${min}和${max}之間`,
    date_format: (field, [format]) => `${fieldName}必須符合${format}格式`,
    decimal: (field, [decimals = "*"] = []) =>
      `${fieldName}必須是數(shù)字，且能夠保留${
        decimals === "*" ? "" : decimals
      }位小數(shù)`,
    digits: (field, [length]) =>
      `${fieldName}必須是數(shù)字蚣旱，且精確到${length}位數(shù)`,
    dimensions: (field, [width, height]) =>
      `${fieldName}必須在${width}像素與${height}像素之間`,
    email: () => `${fieldName}不是一個(gè)有效的郵箱`,
    ext: () => `${fieldName}不是一個(gè)有效的文件`,
    image: () => `${fieldName}不是一張有效的圖片`,
    included: () => `${fieldName}不是一個(gè)有效值`,
    integer: () => `${fieldName}必須是整數(shù)`,
    ip: () => `${fieldName}不是一個(gè)有效的地址`,
    length: (field, [length, max]) => {
      if (max) {
        return `${fieldName}長(zhǎng)度必須在${length}到${max}之間`;
      }
      return `${fieldName}長(zhǎng)度必須為${length}`;
    },
    max: (field, [length]) => `${fieldName}不能超過(guò)${length}個(gè)字符`,
    max_value: (field, [max]) => `${fieldName}必須小于或等于${max}`,
    mimes: () => `${fieldName}不是一個(gè)有效的文件類型`,
    min: (field, [length]) => `${fieldName}必須至少有${length}個(gè)字符`,
    min_value: (field, [min]) => `${fieldName}必須大于或等于${min}`,
    excluded: () => `${fieldName}不是一個(gè)有效值`,
    numeric: () => `${fieldName}只能包含數(shù)字字符`,
    regex: () => `${fieldName}格式無(wú)效`,
    required: () => `${fieldName}不能為空`,
    size: (field, [size]) => `${fieldName}必須小于${formatFileSize(size)}`,
    url: () => `${fieldName}不是一個(gè)有效的url`
  }
});

// 手機(jī)號(hào)碼驗(yàn)證
Validator.extend("mobile", {
  getMessage: () => `請(qǐng)輸入正確的手機(jī)號(hào)碼`,
  validate: value =>
    value.length === 11 &&
    /^(((13[0-9]{1})|(14[57]{1})|(15[012356789]{1})|(17[03678]{1})|(18[0-9]{1})|(19[89]{1})|(16[6]{1}))+\d{8})$/.test(
      value
    )
});

8. 最終效果

image.png

9. 補(bǔ)充

一般都是點(diǎn)提交的時(shí)候會(huì)驗(yàn)證是否有錯(cuò)誤碑幅，可以使用validateAll來(lái)驗(yàn)證，當(dāng)然也可以指定驗(yàn)證塞绿，具體的可以看官方文檔沟涨。

   methods: {
    onSubmit() {
      // 驗(yàn)證
      this.$validator.validateAll().then(result => {
        if (result) {
         //axios提交
        }
      });
    }
  }