痛点

Vant没有提供内置的表单验证，但是Field输入框提供了error、error-message这两个API。
https://youzan.github.io/vant/#/zh-CN/field

image.png

<van-cell-group>
  <van-field
    v-model="username"
    label="用户名"
    placeholder="请输入用户名"
    error
  />
  <van-field
    v-model="phone"
    label="手机号"
    placeholder="请输入手机号"
    error-message="手机号格式错误"
  />
</van-cell-group>

虽然这样也可以自己手动验证，但是对于页面中有多个验证时弄起来还是比较烦的，最好是能有一个验证插件统一搞定这一切。

VeeValidate

基于上面的痛点，我在项目中使用了 VeeValidate 来作为验证插件，当然还有一些其他的验证插件，这个看个人喜好，你想用什么都可以，反正思路都是一样的。

//VeeValidate的基础用法
<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

开搞

1.安装VeeValidate

npm install vee-validate --save

2.修改main

我这里是新建了一个validate.js文件来单独处理的，因为我还有一些其他自定义的验证，如果只是测试直接在main.js中修改就好了。

image.png

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

3.页面中使用

<van-field
          v-model="form.contactPhone"
          v-validate="'required|mobile'"   //mobile是我自定义的
          name="contactPhone" //特别注意一定得给name
          :error-message="errors.first('contactPhone')" //错误信息
          :error="errors.has('contactPhone')" //是否有错误
          label="联系人电话"
          placeholder="请输入手机号码"
        >

mobile自定义验证代码，我也把常用的正则表达式整理了一下。https://form-validate.github.io/form-validate/

// 手机号码验证
Validator.extend("mobile", {
  getMessage: () => `请输入正确的手机号码`,
  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
中文是显示了，但是提示会把input框的name值带上，看着特别的别扭，下面就来把它搞掉。

6. 搞掉丑陋的提示

先去看官网的中文文件是怎么写的，然后进行修改
https://github.com/baianat/vee-validate/blob/master/locale/zh_CN.js

image.png
源码中只需要把field设置成空就好了，或者直接删除，我这里选择设置成空，因为删除的话比较多，有点麻烦，如果以后还需要改什么也不太方便。

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 = ""; //原来的i18n的fieldName会显示绑定的name值，就是英文，实际项目中不需要

Validator.localize("zh_CN", {
  name: "zh_CN",
  attributes: {},
  messages: {
    _default: () => `${fieldName}无效`,
    after: (field, [target]) => `${fieldName}必须在${target}之后`,
    alpha_dash: () => `${fieldName}能够包含字母数字字符、破折号和下划线`,
    alpha_num: () => `${fieldName}只能包含字母数字字符`,
    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}格式错误`,
    date_between: (field, [min, max]) => `${fieldName}必须在${min}和${max}之间`,
    date_format: (field, [format]) => `${fieldName}必须符合${format}格式`,
    decimal: (field, [decimals = "*"] = []) =>
      `${fieldName}必须是数字，且能够保留${
        decimals === "*" ? "" : decimals
      }位小数`,
    digits: (field, [length]) =>
      `${fieldName}必须是数字，且精确到${length}位数`,
    dimensions: (field, [width, height]) =>
      `${fieldName}必须在${width}像素与${height}像素之间`,
    email: () => `${fieldName}不是一个有效的邮箱`,
    ext: () => `${fieldName}不是一个有效的文件`,
    image: () => `${fieldName}不是一张有效的图片`,
    included: () => `${fieldName}不是一个有效值`,
    integer: () => `${fieldName}必须是整数`,
    ip: () => `${fieldName}不是一个有效的地址`,
    length: (field, [length, max]) => {
      if (max) {
        return `${fieldName}长度必须在${length}到${max}之间`;
      }
      return `${fieldName}长度必须为${length}`;
    },
    max: (field, [length]) => `${fieldName}不能超过${length}个字符`,
    max_value: (field, [max]) => `${fieldName}必须小于或等于${max}`,
    mimes: () => `${fieldName}不是一个有效的文件类型`,
    min: (field, [length]) => `${fieldName}必须至少有${length}个字符`,
    min_value: (field, [min]) => `${fieldName}必须大于或等于${min}`,
    excluded: () => `${fieldName}不是一个有效值`,
    numeric: () => `${fieldName}只能包含数字字符`,
    regex: () => `${fieldName}格式无效`,
    required: () => `${fieldName}不能为空`,
    size: (field, [size]) => `${fieldName}必须小于${formatFileSize(size)}`,
    url: () => `${fieldName}不是一个有效的url`
  }
});

// 手机号码验证
Validator.extend("mobile", {
  getMessage: () => `请输入正确的手机号码`,
  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. 补充

一般都是点提交的时候会验证是否有错误，可以使用validateAll来验证，当然也可以指定验证，具体的可以看官方文档。

   methods: {
    onSubmit() {
      // 验证
      this.$validator.validateAll().then(result => {
        if (result) {
         //axios提交
        }
      });
    }
  }