vant表单点击提交没有触发验证_在Vant的基础上实现添加表单验证框架的方法示例...

Vant 一套基于Vue的移动端UI框架，有赞出品。

因为UI设计的够漂亮，源码结构也比较清晰，插件定位也比较明确，重要是实战过程中的使用体验不错。在最近的项目当中就使用 Vant 作为移动端的基础UI框架，但在实践过程中发现该框架和其他框架有不一样的地方。例如它不内置表单验证，接下来，我把自己实现验证框架的思路分享出来。

分析需求

我们找的插件主要能解决以下问题

支持中文

适应UI框架

分组验证

动态验证(数据动态，规则动态)

我的项目里使用的是 vee-validate

解决问题

安装及支持中文

npm install vee-validate --save

import VeeValidate, { Validator } from 'vee-validate'

import zh_CN from 'vee-validate/dist/locale/zh_CN';

Validator.localize('zh_CN', zh_CN)

Vue.use(VeeValidate)

中文问题可以解决，但是遇到个很恶心的问题，这样的错误提示会变成 title不能为空 这样的提示，实际展示效果是不好的。

所以这个需要重构下，自己来实现错误提示的内容

const formatFileSize = function (size) {

let units = ['Byte', 'KB', 'MB', 'GB', 'TB', 'PB',