React|React Native post请求参数校验组件(Validator)
React Native post请求参数校验组件(Validator)
在平时开发表单页面时，经常需要各种参数的校验，校验通过发送表单请求，校验出错就Toast 错误信息，当一个表单有三五项时，我们做一些if else 判断还好，当表单项多达10来项，做判断会增加很多垃圾代码，而且可维护性也不高，这时我们可以封装一个表单参数校验组件Valudator来解决这繁琐的问题。
效果图 
文章图片
image 核心源码
Validator校验器
// 登录表单校验
const loginValidator = () => ({
validator: {
data: ValidateUtil([
{
func: (params, state, payload) => Required(params.name), msg: '请输入用户名'
},
{
func: (params, state, payload) => Required(params.pwd), msg: '请输入密码'
}
])
}
})// 注册表单校验
const registerValidator = () => ({
validator: {
data: ValidateUtil([
{
func: (params, state, payload) => Required(params.name), msg: '请输入手机号'
},
{
func: (params, state, payload) => RegExpr.checkMobile(params.name), msg: '手机号格式不正确'
},
{
func: (params, state, payload) => Required(params.code), msg: '请输入验证码'
},
{
func: (params, state, payload) => Required(params.pwd), msg: '请输入密码'
}
])
}
})
Validator中间件
/**
* Created by guangqiang on 2017/11/23.
*/
import {Toast, deepClone} from '../utils'
export default validatorMiddleware = extraArgument => {return ({getState, dispatch}) => next => action => {// console.log('action:', action)let actionObj = action || {}
let payloadObj = actionObj.payload
let metaObj = action.meta || {}
let validatorObj = metaObj.validator || {}if (!metaObj.validator) {
return next(action)
}let nextAction = undefined
let nextPayload = undefinedtry {
nextPayload = action.payload.nextPayload
} catch (e) {
return next(action)
}if (nextPayload !== undefined) {
nextAction = deepClone(action)
nextAction.payload = nextPayload
}if (metaObj && (typeof nextPayload.promise === 'function') && validatorObj) {if (Array.prototype.isPrototypeOf(validatorObj.data) && validatorObj.data.length > 0) {let paramsArr = validatorObj.data || []
let func = null
let msg = ''
let isPassed = true
let params = payloadObj.params || {}
for (let i = 0;
i < paramsArr.length;
i ++) {let item = paramsArr[i]
func = item.func
msg = item.msgif(typeof func === 'function') {
if (typeof func(params, getState(), payloadObj) !== 'boolean') {
throw new Error('validator func must return boolean type')
} else {
if (!func(params, getState(), payloadObj)) {
Toast.showWarning(msg)
isPassed = false
return {
err: 'validator',
msg: msg,
params: params,
id: i,
}
} else {
continue
}
}
} else {
throw new Error('validator func is needed')
}
}if (isPassed) {
action = nextAction || action
if (typeof action.payload.promise === 'function') {
let promise = action.payload.promise()
action = {
...action,
payload: {
...action.payload,
promise: promise,
}
}
}
return next(action)
}
}
}
}
}
调用方式
submit() {
let params = {}
params.name = this.state.mobileNum
params.code = this.state.verifyCode
params.pwd = this.state.pwdparams.iconurl = 'http://ovyjkveav.bkt.clouddn.com/17-11-9/48949929.jpg'
params.gender = this.state.sex ? this.state.sex : '未知'
params.province = '上海'
params.city = '静安'let action = this.props.mockRegister(params)
if (action instanceof Promise) {
storage.save('userInfo', params)
this.props.callback && this.props.callback('register')
Toast.showSuccess('注册成功', () => Actions.pop())
}
}
【React|React Native post请求参数校验组件(Validator)】从上面的调用方式我们可以看到，我们没有做任何参数的校验逻辑处理，这样使得页面控制器的js文件显得极为的干净，没有过多冗余的代码掺杂其中。
Validator详细使用方式请参照项目源码OneM https://github.com/guangqiang-liu/OneM
更多文章
- 作者React Native开源项目OneM【500+ star】地址(按照企业开发标准搭建框架完成开发的)：https://github.com/guangqiang-liu/OneM：欢迎小伙伴们 star
- 作者主页：包含60多篇RN开发相关的技术文章http://www.jianshu.com/u/023338566ca5 欢迎小伙伴们：多多关注，多多点赞
- 作者React Native QQ技术交流群：620792950 欢迎小伙伴进群交流学习
- 友情提示：在开发中有遇到RN相关的技术问题，欢迎小伙伴加入交流群（620792950），在群里提问、互相交流学习。交流群也定期更新最新的RN学习资料给大家，谢谢大家支持！
文章图片
QQ群二维码，500+ RN工程师在等你加入哦
推荐阅读
- react|react 安装
- 接口|axios接口报错-参数类型错误解决
- React.js学习笔记(17)|React.js学习笔记(17) Mobx
- React.js的表单(六)
- 【React|【React Native填坑之旅】从源码角度看JavaModule注册及重载陷阱
- react-navigation|react-navigation 动态修改 tabBar 样式
- Flutter|Flutter SwiftUI React 对比
- React|React refs和onRefs的使用
- 手写|手写 React-Native 方法调用式的 Modal 弹框、Toast 提示
- react组件通信