超轻量代码实现字段校验工具库(移动端)

  • Kevin
  • 21 Minutes
  • 2018年2月10日

先附上项目的链接地址:

github: https://github.com/moohng/validator

动机

有表单的地方必有校验,我们使用不同的框架有不同的校验方法。在PC端基于ReactAnt Design框架中的Form表单的功能就十分强大,而在移动端,却很难找到一款能与之匹敌完整框架。移动端比较流行的vux框架,虽然有的组件自带了校验功能,但然并卵,基本上很难匹配真实项目的需求。

放弃vux组件自带的校验功能,后来在github上找到一款比较流行的校验库vee-validate。这个库做到了与表单组件之间的解耦,确实也能够灵活的实现各式各样的项目需求,但给我的感觉就是有点重。一般来说,移动端的开销越低越好,代码越轻量越好,区区一个校验,实在不忍心用上如此庞大的工具。

思前想后,还不如自己实现一套校验方案。首先校验工具必须要与组件完全解耦,其次校验工具要足够轻量,够用就好。移动端不比PC端,考虑到性能,我们一般校验表单都是在提交的时候进行校验,对不满足要求的字段进行提示(比如:字段组件样式变红,Toast轻提示等)。

思考

实现

校验函数(validator)

思路:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function validator(target, rules) {
const ruleKeys = rules ? Object.keys(rules) : []
if (!ruleKeys.length) return new Result()
const results = ruleKeys.reduce((errors, key) => {
let value = target[key]
let tips = null
const { required, pattern, validate, alias = key, message = `请输入正确的${alias}`, trim = true } = rules[key] || {}
// 去掉字符串首位空格
trim && typeof value === 'string' && (value = value.trim())
if (typeof value === undefined || value === null || !value.length || JSON.stringify(value) === '{}') {
required && (tips = typeof required === 'string' ? required : `请输入${alias}`)
} else if (pattern && pattern instanceof RegExp && !pattern.test(value)) { // 正则校验
tips = message
} else if (typeof validate === 'function') { // 自定义校验函数
const res = validate(value, target)
tips = typeof res === 'string' ? res : (!res ? message : null)
}
return tips ? { ...errors, [key]: tips } : { ...errors }
}, {})
return new Result(results)
}

校验结果(Result)

我们看到,在validator函数中,返回了Result的实例对象。代码很简单:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
class Result {
constructor(errors = {}) {
Object.assign(this, errors)
}
hasError() {
return Object.keys(this).length > 0
}
first(index = 1) {
return Object.values(this)[index - 1]
}
firstKey(index = 1) {
return Object.keys(this)[index - 1]
}
}

其实也就是在普通的对象上,扩展(原型上添加)了3个方法。

API

validator

核心校验函数:validator(target: Object, rules: Object) => result: Result

target

待校验的目标对象集合:{ name: 'Kevin', age: 18 }

rules

校验规则集合:{ name: rule1, age: rule2 }

Result

包括所有不通过校验的字段集合: { name: '姓名不能为空', age: '年龄必须大于12岁' }

方法:

应用

该校验库已经发布到npm仓库,可通过npmyarn工具进行下载。

1
$ yarn add @moohng/validator

Vue中使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<template>
<x-form>
<x-input label="姓名" v-modal="form.name" />
<x-upload label="头像" v-model="form.avatars" />
<x-select label="性别" v-model="form.sex" />
<x-input-number label="年龄" v-model="form.age" />
<x-button type="submit" @click="onSubmit">提交<x-button>
</x-form>
</tempalte>

<srcipt>
import { validator } from '@moohng/validator'
import rules from './rules'

export default {
data() {
return {
result: null,
form: {}
}
},
methods: {
onSubmit() {
this.result = validator(form, rules)
if (this.result.hasError()) {
this.$toast(this.result.first())
} else {
// ...
}
}
}
}
</script>

假如你需要在校验报错之后对相应的组件进行样式上的处理,可通过响应式的result去完成:

1
2
3
4
5
6
7
8
9
<template>
<x-form>
<x-input
:class="{ 'error': result.name }"
label="姓名"
v-modal="form.name"
/>
</x-form>
</tempalte>

更优雅的做法是通过一个自定义指令去完成这些事情,比如一些滚动、聚焦、失焦、样式切换等行为。你需要记住的是:你已经拿到了这个校验结果,这个结果已包含了你需要的信息,且是响应式的(在data中已预先定义),之后的一切处理都可通过这个result对象去自行扩展。

最后

如果觉得不错,请大家多多支持~