在Vant的基础上实现添加表单验证框架的方法示例


Posted in Javascript onDecember 05, 2018

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

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

分析需求

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

  • 支持中文
  • 适应UI框架
  • 分组验证
  • 动态验证(数据动态,规则动态)

去网络上搜索了一些框架,推荐两款(在官方也有推https://cn.vuejs.org/v2/cookbook/form-validation.html )

  • vuelidate
  • vee-validate

我的项目里使用的是 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', '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]));
}
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`
 }
})
Vue.use(VeeValidate)

适应UI框架

虽然Vant没有内置验证框架,但提供了错误的样式。

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

用 vee-validate 可以这样解决

<van-field
 ...
 name="title"
 v-validate="'required|max:20'"
 :error="errors.has('title')"
 :error-message="errors.first('title')"
/>
this.$validator.validateAll().then((result) => {
 if(result){
  // ...
 }
})

分组验证

<van-field
 name="title"
 data-vv-scope="group-1"
 v-validate="'required|max:20'"
 :error="errors.has('group-1.title')"
 :error-message="errors.first('group-1.title')"
/>
this.$validator.validateAll('group-1').then((result) => {
 if(result){
  // ...
 }
})

如此,基于 Vant 的验证框架问题就得以解决了,可以愉快的玩耍表单验证了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery的attr与prop使用介绍
Oct 10 Javascript
node.js适合游戏后台开发吗?
Sep 03 Javascript
jQuery基础知识小结
Dec 22 Javascript
XML、HTML、CSS与JS的区别整理
Feb 18 Javascript
极简主义法编写JavaScript类
Nov 02 Javascript
原生JS实现$.param() 函数的方法
Aug 10 Javascript
详解vue中async-await的使用误区
Dec 05 Javascript
vue中过滤器filter的讲解
Jan 21 Javascript
200行HTML+JavaScript实现年会抽奖程序
Jan 22 Javascript
bootstrap-table后端分页功能完整实例
Jun 01 Javascript
Openlayers绘制聚合标注
Sep 28 Javascript
JavaScript架构搭建前端监控如何采集异常数据
Jun 25 Javascript
在Vant的基础上封装下拉日期控件的代码示例
Dec 05 #Javascript
Vant的安装和配合引入Vue.js项目里的方法步骤
Dec 05 #Javascript
微信小程序实现图片滚动效果示例
Dec 05 #Javascript
详解vue中的computed的this指向问题
Dec 05 #Javascript
使用rollup打包JS的方法步骤
Dec 05 #Javascript
微信小程序入门之广告条实现方法示例
Dec 05 #Javascript
Vue实现本地购物车功能
Dec 05 #Javascript
You might like
php中的MVC模式运用技巧
2007/05/03 PHP
php 获取本地IP代码
2013/06/23 PHP
PHP编写的图片验证码类文件分享
2016/06/06 PHP
PHP实现限制IP访问及提交次数的方法详解
2017/07/17 PHP
php使用ftp实现文件上传与下载功能
2017/07/21 PHP
解决PHP Opcache 缓存刷新、代码重载出现无法更新代码的问题
2020/08/24 PHP
简单实例处理url特殊符号&amp;处理(2种方法)
2013/04/02 Javascript
在JavaScript里嵌入大量字符串常量的实现方法
2013/07/07 Javascript
js操作table示例(个人心得)
2013/11/29 Javascript
利用javascript判断文件是否存在
2013/12/31 Javascript
基于NodeJS的前后端分离的思考与实践(六)Nginx + Node.js + Java 的软件栈部署实践
2014/09/26 NodeJs
javascript操作select元素实例分析
2015/03/27 Javascript
jQuery模拟select实现下拉菜单功能
2016/06/20 Javascript
jquery插件uploadify多图上传功能实现代码
2016/08/12 Javascript
JS作用域闭包、预解释和this关键字综合实例解析
2016/12/16 Javascript
使用jquery给新生的th绑定hover事件的实例
2017/02/10 Javascript
JavaScript初学者必看“new”
2017/06/12 Javascript
jQuery实现切换隐藏与显示同时切换图标功能
2017/10/29 jQuery
在VUE中使用lodash的debounce和throttle操作
2020/11/09 Javascript
python 装饰器功能以及函数参数使用介绍
2012/01/27 Python
Python中input和raw_input的一点区别
2014/10/21 Python
Python+selenium实现自动循环扔QQ邮箱漂流瓶
2018/05/29 Python
Python使用numpy产生正态分布随机数的向量或矩阵操作示例
2018/08/22 Python
浅谈tensorflow中Dataset图片的批量读取及维度的操作详解
2020/01/20 Python
如何在Win10系统使用Python3连接Hive
2020/10/15 Python
浏览器实现移动端高性能css3动画(开启gpu加速)
2013/12/23 HTML / CSS
CSS3实现头像旋转效果
2017/03/13 HTML / CSS
森海塞尔美国官网:Sennheiser耳机与耳麦
2017/07/19 全球购物
改变生活的男士内衣:SAXX Underwear
2019/08/28 全球购物
东方通信股份有限公司VC面试题
2014/08/27 面试题
大学生家政服务项目创业计划书
2014/01/30 职场文书
小学生安全保证书
2014/02/01 职场文书
会计自我鉴定
2014/02/04 职场文书
世界环境日活动总结
2015/02/11 职场文书
冬季作息时间调整通知
2015/04/24 职场文书
国庆放假通知怎么写
2015/07/30 职场文书