Vue.js如何优雅的进行form validation


Posted in Javascript onApril 07, 2017

本文针对知乎上关于Vue.js如何优雅的进行form validation问题进行了整理,供大家参考,具体内容如下

Vue.js如何优雅的进行form validation?

1. 所有validation rules是被集中管理,而不是每个文件自己一种,导致验证规则冗余。
2. 能够进行remote validate。
3. 不用JQuery。

现有的插件vuejs/vue-validator · GitHub只能实现普通验证,但如何解决1,因为vue-validator没有把校验规则给抽象出来,没办法,现在只能自己代码上再抽出一层rules来管理。remote validation只能手写借助Jquery ajax来验证。

网友1、曾广营

这个现在我可以回答了。

我觉得 vue-validator 太冗余了。所以自己写了个项目用的插件 va.js,它实现了

集中式的管理 校验规则 和 报错模板。

报错时机可选

校验正确后的数据,已经打包成对象,可以直接用

允许各个页面对规则进行覆盖,对报错信息进行自定义修改,以及允许ajax获取数据后,再对规则进行补充

按顺序来校验报错

我写了一篇博文来记载

我个人观点。表单验证的是一种高度定制化的东东。所以网上用的插件,都会有不尽人意的感觉,因为要么冗余,要么不够。因此,我分享了思路和源码。真的想写的话,借鉴思路自己写吧。

补充:

1.自定义的js函数规则,可以自己再加入。 有个存储校验函数的对象,可以扩展。
2.对ajax的处理仅仅是暴露通过校验的数据的对象。即假如在ajax前不需验证的话,这份暴露出来的数据是可以提交的;假如需要验证,可以使用这个暴露出来的数据,对单个或多个字段加上额外的校验。 

网友2、冉聪杰

推荐:vee-validate https://github.com/logaretm/vee-validate/

网友3、李文富

自己简单写一个,支持异步,支持任意 Vue Component,不限定于 Form Element。

来自:https://github.com/crossjs/plato/blob/master/src/modules/validator/index.js

看 return 部分即可:

import Vue from 'vue'
import * as rules from './rules'
import promisify from 'util/promisify'

export default (context, options = {}) => {
 // options = { scope: 'validator', prefix: '/', ...options }

 // 只注册回调,不注册数据
 return () => {
 Vue.mixin({
  beforeCreate () {
  const options = this.$options
  const { validator } = options

  if (validator) {
   // 在入口处定义 $validation
   Vue.util.defineReactive(this, '$validation', {
   fields: [],
   errors: []
   })
   this.$validator = this
   nextTick(this, validator.auto)
  } else {
   const { parent } = options
   if (parent && parent.$validation) {
   this.$validation = parent.$validation
   this.$validator = parent.$validator
   nextTick(this, parent.$validator.$options.validator.auto)
   }
  }
  }
 })

 /**
  * $validate
  *
  * validate vm recursively.
  *
  * @return {Promise}
  */
 Vue.prototype.$validate = function (fromEntry) {
  const { validate, $validation = {}, $validator } = this

  // 如果此处为校验入口
  if ($validator === this && !fromEntry) {
  // 顶级往下校验所有子组件
  return Promise.all($validation.fields
   .map(field => field.$validate(true)))
   .then(() => $validation)
   .catch(() => Promise.reject($validation))
  } else {
  if (!validate) {
   return Promise.resolve($validation)
  }
  return Promise.all(Object.keys(validate).map(key => {
   return new Promise((resolve, reject) => {
   const { validator = rules[key], rule, message } = validate[key]
   if (validator) {
    // reject if falsy
    promisify(validator(this.value, rule), true)
    .then(resolve)
    .catch(() => {
     reject({
     field: this.field || this,
     rule,
     message
     })
    })
   } else {
    __PROD__ || console.warn(`'${key}' is NOT a valid validator`)
    resolve()
   }
   })
  })).then(() => {
   updateErrors($validation.errors, this)
   return $validation
  }).catch(error => {
   updateErrors($validation.errors, this, error)
   return Promise.reject($validation)
  })
  }
 }

 function updateErrors (errors, vm, replacement) {
  const field = vm.field || vm
  const found = errors.some((error, index) => {
  if (error.field === field) {
   if (replacement) {
   errors.splice(index, 1, replacement)
   } else {
   errors.splice(index, 1)
   }
   return true
  }
  return false
  })

  if (!found && replacement) {
  errors.push(replacement)
  }

  return errors
 }

 function nextTick (vm, auto) {
  vm.$nextTick(() => {
  // 定义了校验规则
  if (vm.validate) {
   vm.$validation.fields.push(vm)
   // 加载完成自动检查
   if (auto) {
   vm.$validate()
   }
  }
  })
 }
 }
}

还有一个网友推荐的:试试这个自带气泡提示的vue校验插件,配合vue-hook-form能够轻松实现表单校验

以上就是整理的关于此类问题的几个不错的回答,如果大家有更好的答案欢迎分享,希望本文对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
使用自定义setTimeout和setInterval使之可以传递参数和对象参数
Apr 24 Javascript
Extjs Ext.MessageBox.confirm 确认对话框详解
Apr 02 Javascript
表单JS弹出填写提示效果代码
Apr 16 Javascript
node.js+Ajax实现获取HTTP服务器返回数据
Nov 26 Javascript
js实现不提交表单获取单选按钮值的方法
Aug 21 Javascript
JavaScript实现点击文本自动定位到下拉框选中操作
Jun 15 Javascript
老生常谈JavaScript 正则表达式语法
Aug 20 Javascript
前端图片懒加载(lazyload)的实现方法(提高用户体验)
Aug 21 Javascript
JavaScript设计模式之享元模式实例详解
Jan 17 Javascript
微信小程序实现日期格式化和倒计时
Nov 01 Javascript
使用原生JS实现滚轮翻页效果的示例代码
May 31 Javascript
Vue初始化中的选项合并之initInternalComponent详解
Jun 11 Javascript
详解Node.js实现301、302重定向服务
Apr 07 #Javascript
Express URL跳转(重定向)的实现方法
Apr 07 #Javascript
微信小程序 首页制作简单实例
Apr 07 #Javascript
微信小程序 商城开发(ecshop )简单实例
Apr 07 #Javascript
js控制文本框禁止输入特殊字符详解
Apr 07 #Javascript
ES6学习笔记之Set和Map数据结构详解
Apr 07 #Javascript
Vue表单验证插件Vue Validator使用方法详解
Apr 07 #Javascript
You might like
Terran兵种介绍
2020/03/14 星际争霸
php calender(日历)二个版本代码示例(解决2038问题)
2013/12/24 PHP
php生成4位数字验证码的实现代码
2015/11/23 PHP
通过身份证号得到出生日期和性别的js代码
2009/11/23 Javascript
Html中JS脚本执行顺序简单举例说明
2010/06/19 Javascript
Jqyery中同等与js中windows.onload的应用
2011/05/10 Javascript
JS代码优化技巧之通俗版(减少js体积)
2011/12/23 Javascript
深入理解javascript学习笔记(一) 编写高质量代码
2012/08/09 Javascript
jquery如何实现锚点链接之间的平滑滚动
2013/12/02 Javascript
微信WeixinJSBridge API使用实例
2015/05/25 Javascript
js实现时间显示几天前、几小时前或者几分钟前的方法集锦
2015/05/29 Javascript
jQuery+PHP+MySQL二级联动下拉菜单实例讲解
2015/10/27 Javascript
javascript获取select标签选中的值
2016/06/04 Javascript
EasyUi 打开对话框后控件赋值及赋值后不显示的问题解决办法
2017/01/19 Javascript
NodeJS遍历文件生产文件列表功能示例
2017/01/22 NodeJs
vue实现todolist单页面应用
2017/04/11 Javascript
JS实现瀑布流布局
2017/10/21 Javascript
JS获取url参数,JS发送json格式的POST请求方法
2018/03/29 Javascript
浅谈Vue.js 关于页面加载完成后执行一个方法的问题
2019/04/01 Javascript
vue项目中全局引入1个.scss文件的问题解决
2019/08/01 Javascript
json_decode 索引为数字时自动排序问题解决方法
2020/03/28 Javascript
[01:19:34]2014 DOTA2国际邀请赛中国区预选赛 New Element VS Dream time
2014/05/22 DOTA
python基础教程之udp端口扫描
2014/02/10 Python
Python打印斐波拉契数列实例
2015/07/07 Python
Python3.4编程实现简单抓取爬虫功能示例
2017/09/14 Python
Python使用zip合并相邻列表项的方法示例
2018/03/17 Python
python 筛选数据集中列中value长度大于20的数据集方法
2018/06/14 Python
使用Python爬取弹出窗口信息的实例
2020/03/14 Python
matplotlib.pyplot.matshow 矩阵可视化实例
2020/06/16 Python
PyTorch 中的傅里叶卷积实现示例
2020/12/11 Python
利用canvas实现图片下载功能来实现浏览器兼容问题
2019/05/31 HTML / CSS
html5声频audio和视频video等新特性详细说明
2012/12/26 HTML / CSS
追悼会主持词
2014/03/20 职场文书
中国梦演讲稿5分钟
2014/08/19 职场文书
准备去美国留学,那么大学申请文书应该怎么写?
2019/08/12 职场文书
小程序与后端Java接口交互实现HelloWorld入门
2021/07/09 Java/Android