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 相关文章推荐
js模拟hashtable的简单实例
Mar 06 Javascript
纯js实现div内图片自适应大小(已测试,兼容火狐)
Jun 16 Javascript
自定义函数实现IE7与IE8不兼容js中trim函数的问题
Feb 03 Javascript
javascript实现控制div颜色
Jul 07 Javascript
jquery实现漂亮的二级下拉菜单代码
Aug 26 Javascript
jQuery实现页面点击后退弹出提示框的方法
Aug 24 Javascript
为什么我们要做三份 Webpack 配置文件
Sep 18 Javascript
解读vue生成的文件目录结构及说明
Nov 27 Javascript
angularJs使用ng-repeat遍历后选中某一个的方法
Sep 30 Javascript
JavaScript事件对象深入详解
Dec 30 Javascript
详解使用webpack+electron+reactJs开发windows桌面应用
Feb 01 Javascript
Js和VUE实现跑马灯效果
May 25 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 生成WML页面方法详解
2009/08/09 PHP
如何使用PHP批量去除文件UTF8 BOM信息
2013/08/05 PHP
php中AES加密解密的例子小结
2014/02/18 PHP
PHP以mysqli方式连接类完整代码实例
2014/07/15 PHP
smarty模板引擎基础知识入门
2015/03/30 PHP
Zend Framework动作助手(Zend_Controller_Action_Helper)用法详解
2016/03/05 PHP
PHP中PDO事务处理操作示例
2018/05/02 PHP
DOMAssitant最新版 DOMAssistant 2.5发布
2007/12/25 Javascript
Javascript 数组排序详解
2014/10/22 Javascript
浅谈javascript控制HTML5的全屏操控,浏览器兼容的问题
2016/10/10 Javascript
ES6中Generator与异步操作实例分析
2017/03/31 Javascript
Angularjs为ng-click事件传递参数
2017/06/15 Javascript
JS沙箱模式实例分析
2017/09/04 Javascript
Vue.js划分组件的方法
2017/10/29 Javascript
使用Vue完成一个简单的todolist的方法
2017/12/01 Javascript
浅谈ajax请求不同页面的微信JSSDK问题
2018/02/26 Javascript
浅谈JS对象添加getter与setter的5种方法
2018/06/09 Javascript
vue移动端监听滚动条高度的实现方法
2018/09/03 Javascript
VUE路由动态加载实例代码讲解
2019/08/26 Javascript
详解Vue后台管理系统开发日常总结(组件PageHeader)
2019/11/01 Javascript
vue点击页面空白处实现保存功能
2019/11/06 Javascript
vue transition 在子组件中失效的解决
2019/11/12 Javascript
vant组件中 dialog的确认按钮的回调事件操作
2020/11/04 Javascript
vue.js watch经常失效的场景与解决方案
2021/01/07 Vue.js
Django查找网站项目根目录和对正则表达式的支持
2015/07/15 Python
Django实现学员管理系统
2019/02/26 Python
简单了解Python多态与属性运行原理
2020/06/15 Python
基于tf.shape(tensor)和tensor.shape()的区别说明
2020/06/30 Python
PyCharm最新激活码PyCharm2020.2.3有效
2020/11/18 Python
西班牙在线光学:Visual-Click
2020/06/22 全球购物
2014年党员承诺书范文
2014/05/20 职场文书
食品安全处置方案
2014/06/14 职场文书
船舶工程技术专业求职信
2014/08/07 职场文书
商务宴会祝酒词
2015/08/11 职场文书
Python Django 后台管理之后台模型属性详解
2021/04/25 Python
ICOM R71E和R72E图文对比解说
2022/04/07 无线电