Example of method to implement the method of adding a form verification framework based on Vant

VantA set of mobile UI framework based on Vue, produced by Youzan.

Because the UI is beautiful enough, the source code structure is relatively clear, and the plug-in positioning is relatively clear. The important thing is that the user experience is good during the actual combat process. In recent projects, Vant was used as the basic UI framework for mobile terminals, but in practice, I found that this framework is different from other frameworks. For example, it does not have built-in form verification. Next, I will share my ideas for implementing the verification framework.

Analyze the requirements

The plugins we are looking for can solve the following problems

Support Chinese
Adapt to UI frameworks
Group verification
Dynamic verification (data dynamics, rules dynamics)

I searched for some frameworks on the Internet, and recommended two models (it is also recommended in the official/v2/cookbook/ ）

vuelidate
vee-validate

My project isvee-validate

Solve the problem

Installation and support in Chinese

npm install vee-validate --save

import VeeValidate, { Validator } from 'vee-validate'
import zh_CN from 'vee-validate/dist/locale/zh_CN';

('zh_CN', zh_CN)
(VeeValidate)

The Chinese problem can be solved, but when encountering a very disgusting problem, such an error message will become a title that cannot be empty. This prompt will have a bad actual display effect.
So this needs to be refactored and implement the error prompts by yourself

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 : ((size) / (threshold));
 return (((size / (threshold, i)).toFixed(2) * 1) + " " + (units[i]));
}
('zh_CN', {
 name: 'zh_CN',
 attributes: {}
 messages: {
  _default: () =&gt; `${fieldName}invalid`,
  after: (field, [target]) =&gt; `${fieldName}Must be in${target}after`,
  alpha_dash: () =&gt; `${fieldName}Can contain alphanumeric characters、Dash and underscore`,
  alpha_num: () =&gt; `${fieldName}Only alphanumeric characters are included`,
  alpha_spaces: () =&gt; `${fieldName}Only alphabetical characters and spaces are included`,
  alpha: () =&gt; `${fieldName}Only alphabetical characters are included`,
  before: (field, [target]) =&gt; `${fieldName}Must be in${target}Before`,
  between: (field, [min, max]) =&gt; `${fieldName}Must be in${min}and${max}between`,
  confirmed: (field, [confirmedField]) =&gt; `${fieldName}Can't be with${confirmedField}match`,
  credit_card: () =&gt; `${fieldName}Error in format`,
  date_between: (field, [min, max]) =&gt; `${fieldName}Must be in${min}and${max}between`,
  date_format: (field, [format]) =&gt; `${fieldName}Must be in compliance${format}Format`,
  decimal: (field, [decimals = '*'] = []) =&gt; `${fieldName}Must be a number，And can be retained${decimals === '*' ? '' : decimals}Decimal places`,
  digits: (field, [length]) =&gt; `${fieldName}Must be a number，And precise${length}Number of digits`,
  dimensions: (field, [width, height]) =&gt; `${fieldName}Must be in${width}像素and${height}像素between`,
  email: () =&gt; `${fieldName}Not a valid email`,
  ext: () =&gt; `${fieldName}Not a valid file`,
  image: () =&gt; `${fieldName}Not a valid picture`,
  included: () =&gt; `${fieldName}Not a valid value`,
  integer: () =&gt; `${fieldName}Must be an integer`,
  ip: () =&gt; `${fieldName}Not a valid address`,
  length: (field, [length, max]) =&gt; {
   if (max) {
    return `${fieldName}长度Must be in${length}arrive${max}between`
   }
   return `${fieldName}The length must be${length}`
  },
  max: (field, [length]) =&gt; `${fieldName}Can't exceed${length}Characters`,
  max_value: (field, [max]) =&gt; `${fieldName}Must be less than or equal to${max}`,
  mimes: () =&gt; `${fieldName}Not a valid file类型`,
  min: (field, [length]) =&gt; `${fieldName}Must have at least${length}Characters`,
  min_value: (field, [min]) =&gt; `${fieldName}Must be greater than or equal to${min}`,
  excluded: () =&gt; `${fieldName}Not a valid value`,
  numeric: () =&gt; `${fieldName}Only numeric characters are included`,
  regex: () =&gt; `${fieldName}Formatinvalid`,
  required: () =&gt; `${fieldName}Can't be empty`,
  size: (field, [size]) =&gt; `${fieldName}Must be less than${formatFileSize(size)}`,
  url: () =&gt; `${fieldName}Not a validurl`
 }
})
(VeeValidate)

Adapt to UI frameworks

Although Vant does not have a built-in verification framework, it provides the wrong style.

<van-field
 :error="..."
 :error-message="..."
/>

This is how to solve it using vee-validate

<van-field
 ...
 name="title"
 v-validate="'required|max:20'"
 :error="('title')"
 :error-message="('title')"
/>

this.$().then((result) => {
 if(result){
  // ...
 }
})

Group verification

<van-field
 name="title"
 data-vv-scope="group-1"
 v-validate="'required|max:20'"
 :error="('')"
 :error-message="('')"
/>

this.$('group-1').then((result) => {
 if(result){
  // ...
 }
})

In this way, the problem of Vant-based verification framework can be solved and you can enjoy the form verification.

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.