React Native post请求参数校验组件(Valida
2017-11-29 本文已影响297人
光强_上海
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 = undefined
try {
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.msg
if(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.pwd
params.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())
}
}
从上面的调用方式我们可以看到,我们没有做任何参数的校验逻辑处理,这样使得页面控制器的js文件显得极为的干净,没有过多冗余的代码掺杂其中。
Validator详细使用方式请参照项目源码OneM
https://github.com/guangqiang-liu/OneM
福利时间
- 作者React Native开源项目OneM地址(按照企业开发标准搭建框架完成开发的):https://github.com/guangqiang-liu/OneM (欢迎小伙伴们 star)
- 作者简书主页:包含50多篇RN开发相关的技术文章http://www.jianshu.com/u/023338566ca5 (欢迎小伙伴们:多多关注,多多点赞)
- 作者React Native QQ技术交流群:620792950 欢迎小伙伴进群交流学习
- 友情提示:在开发中有遇到RN相关的技术问题,欢迎小伙伴加入交流群(620792950),在群里提问、互相交流学习。交流群也定期更新最新的RN学习资料给大家,谢谢支持!