在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 相关文章推荐
情人节之礼 js项链效果
Feb 13 Javascript
JQuery实现倒计时按钮的实现代码
Mar 23 Javascript
IE6 hack for js 集锦
Sep 23 Javascript
JavaScript DOM事件(笔记)
Apr 08 Javascript
一道JS前端闭包面试题解析
Dec 25 Javascript
jQuery简单操作cookie的插件实例
Jan 13 Javascript
基于JS实现导航条之调用网页助手小精灵的方法
Jun 17 Javascript
jQuery中常用动画效果函数(日常整理)
Sep 17 Javascript
原生JS实现图片懒加载(lazyload)实例
Jun 13 Javascript
JS中验证整数和小数的正则表达式
Oct 08 Javascript
使用typescript构建Vue应用的实现
Aug 26 Javascript
基于vue-cli3创建libs库的实现方法
Dec 04 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
PHP5.3的垃圾回收机制(动态存储分配方案)深入理解
2012/12/10 PHP
执行、获取远程代码返回:file_get_contents 超时处理的问题详解
2013/06/25 PHP
php获取远程文件内容的函数
2015/11/02 PHP
JavaScript 解析读取XML文档 实例代码
2009/07/07 Javascript
javascript firefox 自动加载iframe 自动调整高宽示例
2013/08/27 Javascript
JavaScript实现查找字符串中第一个不重复的字符
2014/12/29 Javascript
JS控制弹出新页面窗口位置和大小的方法
2015/03/02 Javascript
超实用的javascript时间处理总结
2016/08/16 Javascript
基于Javascript实现文件实时加载进度的方法
2016/10/12 Javascript
bootstrap table之通用方法( 时间控件,导出,动态下拉框, 表单验证 ,选中与获取信息)代码分享
2017/01/24 Javascript
JavaScript模块详解
2017/12/18 Javascript
js的继承方法小结(prototype、call、apply)(推荐)
2019/04/17 Javascript
vue项目查看vue版本及cli版本的实现方式
2020/10/24 Javascript
[02:56]DOTA2上海特锦赛小组赛解说FreeAgain采访花絮
2016/02/27 DOTA
[58:37]Serenity vs Fnatic 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
python2.7删除文件夹和删除文件代码实例
2013/12/18 Python
详解Python中的正则表达式的用法
2015/04/09 Python
老生常谈进程线程协程那些事儿
2017/07/24 Python
python实现按长宽比缩放图片
2018/06/07 Python
GitHub 热门:Python 算法大全,Star 超过 2 万
2019/04/29 Python
浅谈Python中的生成器和迭代器
2020/06/19 Python
css3 中的新特性加强记忆详解
2016/04/16 HTML / CSS
详解CSS3阴影 box-shadow的使用和技巧总结
2016/12/03 HTML / CSS
CSS3 :default伪类选择器使用简介
2018/03/15 HTML / CSS
html5定制表单_动力节点Java学院整理
2017/07/11 HTML / CSS
英国最大的老式糖果店:A Quarter Of
2017/04/08 全球购物
西班牙国家航空官方网站:Iberia
2017/11/16 全球购物
strstr()的简单实现
2013/09/26 面试题
毕业生就业推荐信范文
2013/12/01 职场文书
英语简历自我评价
2014/01/26 职场文书
教师群众路线教育实践活动个人对照检查材料
2014/11/04 职场文书
2015年度党员自我评价范文
2015/03/03 职场文书
同事打架检讨书
2015/05/06 职场文书
世界文化遗产导游词
2019/08/07 职场文书
Feign调用全局异常处理解决方案
2021/06/24 Java/Android
JavaScript获取URL参数的方法分享
2022/04/07 Javascript