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 简便实现页面元素数据验证功能
Mar 24 Javascript
jquery tab插件制作实现代码
Jun 22 Javascript
JavaScript将相对地址转换为绝对地址示例代码
Jul 19 Javascript
JavaScript用JQuery呼叫Server端方法示例代码
Sep 03 Javascript
Jquery实现仿腾讯娱乐频道焦点图(幻灯片)特效
Mar 06 Javascript
jQuery实现输入框邮箱内容自动补全与上下翻动显示效果【附demo源码下载】
Sep 20 Javascript
wap手机端解决返回上一页的js实例
Dec 08 Javascript
基于bootstrap的文件上传控件bootstrap fileinput
Dec 23 Javascript
微信小程序 form组件详解及简单实例
Jan 10 Javascript
JavaScript中最常用的10种代码简写技巧总结
Jun 28 Javascript
jQuery实现腾讯信用界面(自制刻度尺)样式
Aug 15 jQuery
highcharts 在angular中的使用示例代码
Sep 20 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
php5.2.0内存管理改进
2007/01/22 PHP
检查url链接是否已经有参数的php代码 添加 ? 或 &
2010/02/09 PHP
php 在windows下配置虚拟目录的方法介绍
2013/06/26 PHP
PHP实现微信公众号验证Token的示例代码
2019/12/16 PHP
Javascript解决常见浏览器兼容问题的12种方法
2010/01/04 Javascript
jquery获取checkbox的值并post提交
2015/01/14 Javascript
web前端开发JQuery常用实例代码片段(50个)
2015/08/28 Javascript
JavaScript实现点击单元格改变背景色的方法
2016/02/12 Javascript
利用js来实现缩略语列表、文献来源链接和快捷键列表
2016/12/16 Javascript
Angular-Touch库用法示例
2016/12/22 Javascript
js实现手机拍照上传功能
2017/01/17 Javascript
jquery easyui DataGrid简单示例
2017/01/23 Javascript
react-native 完整实现登录功能的示例代码
2017/09/11 Javascript
微信小程序canvas实现刮刮乐效果
2018/07/09 Javascript
JS中验证整数和小数的正则表达式
2018/10/08 Javascript
微信小程序实现导航栏和内容上下联动功能代码
2020/06/29 Javascript
解决vue中的无限循环问题
2020/07/27 Javascript
vue大型项目之分模块运行/打包的实现
2020/09/21 Javascript
ant-design表单处理和常用方法及自定义验证操作
2020/10/27 Javascript
python 内置函数filter
2017/06/01 Python
Python时间的精准正则匹配方法分析
2017/08/17 Python
Python实现PS图像调整颜色梯度效果示例
2018/01/25 Python
Python编程快速上手——Excel表格创建乘法表案例分析
2020/02/28 Python
CSS3制作酷炫的三维相册效果
2016/07/01 HTML / CSS
飞利浦比利时官方网站:Philips比利时
2016/08/24 全球购物
施华洛世奇日本官网:SWAROVSKI日本
2018/05/04 全球购物
教师自荐书
2013/10/08 职场文书
期末自我鉴定
2014/02/02 职场文书
给老师的检讨书
2014/02/11 职场文书
倡议书范文
2014/04/16 职场文书
地震捐款倡议书
2014/08/29 职场文书
员工年终自我评价
2014/09/14 职场文书
文员转正自我鉴定怎么写
2014/09/29 职场文书
写给媳妇的检讨书
2015/05/06 职场文书
2016春季校长开学典礼致辞
2015/11/26 职场文书
预备党员入党思想汇报(范文)
2019/08/14 职场文书