在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 相关文章推荐
Aptana调试javascript图解教程
Nov 30 Javascript
jQuery实现带有动画效果的回到顶部和底部代码
Nov 04 Javascript
JS中递归函数
Jun 17 Javascript
总结Javascript中的隐式类型转换
Aug 24 Javascript
jQuery File Upload文件上传插件使用详解
Dec 06 Javascript
JS中对数组元素进行增删改移的方法总结
Dec 15 Javascript
socket.io学习教程之基础介绍(一)
Apr 29 Javascript
微信小程序开发图片拖拽实例详解
May 05 Javascript
angularjs实现搜索的关键字在正文中高亮出来
Jun 13 Javascript
利用Console来Debug的10个高级技巧汇总
Mar 26 Javascript
当vue路由变化时,改变导航栏的样式方法
Aug 22 Javascript
Vue实现将数据库中带html标签的内容输出(原始HTML(Raw HTML))
Oct 28 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引用返回与取消引用的详解
2013/06/08 PHP
php获取URL中带#号等特殊符号参数的解决方法
2014/09/02 PHP
php字符串分割函数用法实例
2015/03/17 PHP
PHP判断是否为空的几个函数对比
2015/04/21 PHP
php中PDO方式实现数据库的增删改查
2015/05/17 PHP
php实现将base64格式图片保存在指定目录的方法
2016/10/13 PHP
Zend Framework数据库操作技巧总结
2017/02/18 PHP
php代码调试利器firephp安装与使用方法分析
2018/08/21 PHP
在Laravel中使用MongoDB的方法示例
2019/11/11 PHP
stream.js 一个很小、完全独立的Javascript类库
2011/10/28 Javascript
如何使Chrome控制台支持多行js模式——意外发现
2013/06/13 Javascript
js离开或刷新页面检测(且兼容FF,IE,Chrome)
2014/03/05 Javascript
PHP PDO操作总结
2014/11/17 Javascript
JavaScript中常用的六种互动方法示例
2015/03/13 Javascript
javascript中异常处理案例(推荐)
2016/10/03 Javascript
基于Bootstrap仿淘宝分页控件实现代码
2016/11/07 Javascript
JS SetInterval 代码实现页面轮询
2017/08/11 Javascript
快速将Vue项目升级到webpack3的方法步骤
2017/09/14 Javascript
微信小程序使用image组件显示图片的方法【附源码下载】
2017/12/08 Javascript
Windows下支持自动更新的Electron应用脚手架的方法
2018/12/24 Javascript
vue filter 完美时间日期格式的代码
2019/08/14 Javascript
Python对小数进行除法运算的正确方法示例
2014/08/25 Python
python对数组进行反转的方法
2015/05/20 Python
Python实现查找匹配项作处理后再替换回去的方法
2017/06/10 Python
python匿名函数的使用方法解析
2019/10/10 Python
python获得命令行输入的参数的两种方式
2020/11/02 Python
详解Python调用系统命令的六种方法
2021/01/28 Python
html5中去掉input type date默认样式的方法
2018/09/06 HTML / CSS
简单介绍HTML5中audio标签的使用
2015/09/24 HTML / CSS
日本亚马逊官方网站:Amazon.co.jp
2020/04/14 全球购物
"引用"与指针的区别是什么
2016/09/07 面试题
2015年三八妇女节活动总结
2015/02/06 职场文书
教师年度考核个人总结
2015/02/12 职场文书
《开国大典》教学反思
2016/02/16 职场文书
java调用Restful接口的三种方法
2021/08/23 Java/Android
为自由献出你的心脏!「进击的巨人展 FINAL」2022年6月在台开展
2022/04/13 日漫