欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2023-11-14 17:43:22
本文针对知乎上关于vue.js如何优雅的进行form validation问题进行了整理,供大家参考,具体内容如下 vue.js如何优雅的进行form validat...

本文针对知乎上关于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获取数据后,再对规则进行补充

按顺序来校验报错

我写了一篇博文来记载

va.js的写作历程。va.js——vue 表单验证插件的写作过程

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

补充:

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

网友2、冉聪杰

推荐:vee-validate

网友3、李文富

自己简单写一个,支持异步,支持任意 vue component,不限定于 form element。

来自:

看 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()
   }
  }
  })
 }
 }
}

还有一个网友推荐的:试试这个,配合能够轻松实现表单校验

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