使用

vee-validate 3做的

<template>
  <div id="app">
    <div class="login">
      <div class="layui-form layui-form-pane">
        <ValidationProvider rules="required|email" v-slot="{ errors }">
          <label class="layui-form-label">用户名</label>
          <div class="layui-input-block">
            <input
              type="text"
              name="用户"
              v-model.trim="form.name"
              placeholder="请输入标题"
              autocomplete="off"
              class="layui-input"
            />
          </div>
          <div class="error layui-form-mid">{{errors[0]}}</div>
        </ValidationProvider>
      </div>
      <div class="layui-form-item layui-form-pane">
        <ValidationProvider rules="required|passwordMin" v-slot="{ errors }">
          <label class="layui-form-label">密码</label>
          <div class="layui-input-block">
            <input
              type="password"
              name="密码"
              v-model.trim="form.password"
              placeholder="请输入密码"
              autocomplete="off"
              class="layui-input"
            />
          </div>
          <div class="error layui-form-mid">{{errors[0]}}</div>
        </ValidationProvider>
      </div>
      <div class="layui-form-item layui-form-pane">
        <ValidationProvider rules="required|verificationCode" v-slot="{ errors }">
          <label class="layui-form-label">验证码</label>
          <div class="layui-input-block" style="display: flex">
            <input
              type="text"
              name="验证码"
              v-model.trim="form.code"
              placeholder="请输入验证码"
              autocomplete="off"
              class="layui-input"
            />
            <div v-html="code"></div>
          </div>
          <div class="error layui-form-mid">{{errors[0]}}</div>
        </ValidationProvider>
      </div>
    </div>
    <!-- <router-view/> -->
  </div>
</template>

<script>
import {getVerificationCode} from '@/api/user/index'
export default {
  data() {
    return {
      code: "",
      form: {
        name: "",
        password: "",
        code: "",
      },
    };
  },
  created(){
    this.init()
  },
  methods:{
    init(){
      getVerificationCode().then(res => {
        if(res.code === 200){
          this.code = res.msg
        }
      })
    }
  }
};
</script>
<style lang="scss">
.login {
  width: 400px;
  margin: 52px auto;
}
.error {
  color: #ee0a24;
  font-size: 14px;
}
</style>

在local/index.js

import { extend, localize } from 'vee-validate';
import { required, email } from 'vee-validate/dist/rules'
//如果后面字段与前面字段一样会被覆盖
localize('zh_CN', {
    name: 'zh_CN',
    names: {
        nationalID: '身份证号',
        patientname: '就诊人姓名',
        phoneNo: '联系方式',
        cardType: '就诊卡号'
    },
    messages: {
        // your messages.
        _default: (field) => `${field}无效`,
        after: (field, [target]) => `${field}必须在${target}之后`,
        alpha_dash: (field) => `${field}能够包含字母数字字符、破折号和下划线`,
        alpha_num: (field) => `${field}只能包含字母数字字符`,
        alpha_spaces: (field) => `${field}只能包含字母字符和空格`,
        alpha: (field) => `${field}只能包含字母字符`,
        before: (field, [target]) => `${field}必须在${target}之前`,
        between: (field, [min, max]) => `${field}必须在${min}与${max}之间`,
        confirmed: (field, [confirmedField]) =>
            `${field}不能和${confirmedField}匹配`,
        credit_card: (field) => `${field}格式错误`,
        date_between: (field, [min, max]) => `${field}必须在${min}和${max}之间`,
        date_format: (field, [format]) => `${field}必须符合${format}格式`,
        decimal: (field, [decimals = '*'] = []) =>
            `${field}必须是数字，且能够保留${
          decimals === '*' ? '' : decimals}位小数`,
        digits: (field, [length]) =>
            `${field}必须是数字，且精确到${length}位数`,
        dimensions: (field, [width, height]) =>
            `${field}必须在${width}像素与${height}像素之间`,
        email: (field) => `请输入正确的邮箱格式`,
        ext: (field) => `${field}不是一个有效的文件`,
        image: (field) => `${field}不是一张有效的图片`,
        included: (field) => `${field}不是一个有效值`,
        integer: (field) => `${field}必须是整数`,
        ip: (field) => `${field}不是一个有效的地址`,
        length: (field, [length, max]) => {
            if (max) {
                return `${field}长度必须在${length}到${max}之间`
            }
            return `${field}长度必须为${length}`
        },
        max: (field, [length]) => `${field}不能超过${length}个字符`,
        max_value: (field, [max]) => `${field}必须小于或等于${max}`,
        mimes: (field) => `${field}不是一个有效的文件类型`,
        min: (field, [length]) => `不符合最小长度要求`,
        min_value: (field, [min]) => `${field}必须大于或等于${min}`,
        excluded: (field) => `${field}不是一个有效值`,
        numeric: (field) => `${field}只能包含数字字符`,
        regex: (field) => `${field}格式无效`,
        required: (field) => `请输入${field}`,
        url: (field) => field + '不是一个有效的url'
    }
})

extend('email', email)
extend('required', required)
extend('passwordMin', {
    validate: value => {
        return value.length > 5
    },
    message: "不符合最小长度要求"
})

extend('verificationCode', {
    validate: value => {
        return value.length == 4
    },
    message: "验证码长度要求4"
})

就是这样测试没问题简单