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 相关文章推荐
自己动手制作jquery插件之自动添加删除行的实现
Oct 13 Javascript
javascript 得到文件后缀名的思路及实现
May 09 Javascript
jQuery解决input超多的表单提交
Aug 10 Javascript
JavaScript Math.round() 方法
Dec 18 Javascript
自制简易打赏功能的实例
Sep 02 Javascript
Vue基于NUXT的SSR详解
Oct 24 Javascript
JS中touchstart事件与click事件冲突的解决方法
Mar 12 Javascript
vue2单元测试环境搭建
May 24 Javascript
JS使用cookie保存用户登录信息操作示例
May 30 Javascript
JS实现判断移动端PC端功能
Feb 21 Javascript
Vue组件通信$attrs、$listeners实现原理解析
Sep 03 Javascript
vue的webcamjs集成方式
Nov 16 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
php上传文件的增强函数
2010/07/21 PHP
php 高性能书写
2010/12/11 PHP
php实现图片文件与下载文件防盗链的方法
2014/11/03 PHP
PHP安装threads多线程扩展基础教程
2015/11/17 PHP
jQuery autocomplete插件修改
2009/04/17 Javascript
jquery ajax 同步异步的执行示例代码
2010/06/23 Javascript
js Calender控件使用详解
2015/01/05 Javascript
JavaScript中var关键字的使用详解
2015/08/14 Javascript
图解prototype、proto和constructor的三角关系
2016/07/31 Javascript
jQuery Dialog 取消右上角删除按钮事件
2016/09/07 Javascript
Vue.js双向绑定操作技巧(初级入门)
2016/12/27 Javascript
详解vue2.0脚手架的webpack 配置文件分析
2017/05/27 Javascript
详解浏览器缓存和webpack缓存配置
2018/07/06 Javascript
webpack打包非模块化js的方法
2018/10/24 Javascript
基于JS实现前端压缩上传图片的实例代码
2019/05/14 Javascript
如何测量vue应用运行时的性能
2019/06/21 Javascript
JavaScript学习教程之cookie与webstorage
2019/06/23 Javascript
Angular8引入百度Echarts进行图表分析的实现代码
2019/11/27 Javascript
TensorFlow实现RNN循环神经网络
2018/02/28 Python
python如何对实例属性进行类型检查
2018/03/20 Python
python处理两种分隔符的数据集方法
2018/12/12 Python
Python 通过调用接口获取公交信息的实例
2018/12/17 Python
Python Django框架实现应用添加logging日志操作示例
2019/05/17 Python
python config文件的读写操作示例
2019/09/27 Python
Spring Cloud Feign高级应用实例详解
2019/12/10 Python
css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局
2014/10/10 HTML / CSS
详解WebSocket跨域问题解决
2018/08/06 HTML / CSS
Marriott中国:万豪国际酒店查询预订
2016/09/02 全球购物
世界上最大的罕见唱片、CD和音乐纪念品网上商店:991.com
2018/05/03 全球购物
应届大专毕业生个人自荐信
2013/09/22 职场文书
母亲追悼会答谢词
2014/01/27 职场文书
2015年教师自我评价范文
2015/03/04 职场文书
学校远程教育工作总结
2015/08/11 职场文书
springboot+VUE实现登录注册
2021/05/27 Vue.js
Python多个MP4合成视频的实现方法
2021/07/16 Python
SQL写法--行行比较
2021/08/23 SQL Server