手动封装一个uni-app表单校验公共方法

前言

使用uni-app开发小程序，因为没有使用插件，只能自己手动写校验

思路

第一时间考虑就是写一个自定义指令，这个指令包含两个功能，双向数据绑定和校验；
但实际操作发现uni-app不允许使用自定义指令；
因此，改用手动校验比较low的方法，此方法参考了element的校验规范，目前只是简单实现，后续会完善此方法
以下是实现流程
封装一个公共js——需要校验时，传入校验值和rules——校验失败（提示+返回false）——校验成功（返回true）

代码

公共校验js

创建一个rules.js的公共文件

function rules(info,rule) {
	for(var i in rule){
		// 判断rule和info的值是否是一一对于
		if(info[i] === undefined){
			console.log(`传入的数据没有${i}`)
			// 不对应则跳过，没有验证此跳过方法
			// continue 
			return false
		}
		for(let j=0;j<rule[i].length;j++){
			// 判断是否是必填项
			if(rule[i][j].required){
				if(info[i] == ''){
					uni.showToast({
						title: rule[i][j].message || '校验不通过',
						icon: 'none'
					})
					return false
				}
			}
			//判断最小输入值min
			if(rule[i][j].min){
				if(info[i].length < rule[i][j].min){
					uni.showToast({
						title: rule[i][j].message || '校验不通过',
						icon: 'none'
					})
					return false
				}
			}
			//判断最大输入值max
			if(rule[i][j].max){
				if(info[i].length > rule[i][j].max){
					uni.showToast({
						title: rule[i][j].message || '校验不通过',
						icon: 'none'
					})
					return false
				}
			}
			// 正则判断pattern
			if(rule[i][j].pattern){
				if(!rule[i][j].pattern.test(info[i])){
					uni.showToast({
						title: rule[i][j].message || '校验不通过',
						icon: 'none'
					})
					return false
				}
			}
		}
	}
	return true
}
module.exports = rules

因为小程序项目不大，用不上那么多校验，因此目前只写了最大值，最小值，必填项和正则四种方法，你们可以根据需求自己新增校验规则

挂载公共方法

把公共方法挂载到vue上
在main.js处

import rules from '@/utils/rules.js'
// 校验规则
Vue.prototype.$rules = rules

校验代码使用

data() {
	return {
		cpledgeOrderDetail: {
			handleType: '',
			carNo: '',
			custName: '',
			custPhone: '',
			provinceCode: '',
			cityCode: '',
			city:'',
			province:'',
			vehicleAdministrative: '',
			remark: '',
			finishTime: '',
			juridicalPerson:'',
			businessNumber:''
		},
		rules:{
			city:[
				{ required: true, message: '办理城市不能为空' }
			],
			finishTime:[
				{ required: true, message: '预约办理时间不能为空' }
			],
			businessNumber:[
				{ required: true, message: '申请办理笔数不能为空' },
				{ max: 9, message: '申请办理笔数不能超过999999999' }
			],
			custName:[
				{ required: true, message: '车主/联系人名字不能为空' },
				{
					pattern: /^([\u4e00-\u9fa5]){2,6}$/,
					message: '车主/联系人姓名的限制为2-6中文!'
				}
			],
			custPhone:[
				{ required: true, message: '车主/联系人电话不能为空' },
				{
					pattern: /^((13[0-9])|(14[5,7])|(15[0-3,5-9])|(17[0,3,5-8])|(18[0-9])|166|198|199|(147))\d{8}$/,
					message: '请填写有效手机号'
				}
			]
		}
	}
},
methods: {
	formOk(){
		if(this.$rules(this.cpledgeOrderDetail,this.rules)){
			uni.showLoading({
				title:"提交中..."
			})
			//请求，此请求是经过封装的，不要疑为什么是res[1]，把请求换成自己的
			this.$serve.post('orderEdit',this.cpledgeOrderDetail).then(res=>{
				if(res[1]){
					uni.hideLoading()
					uni.navigateBack({
						delta: 1
					})
				}
			})
		}
	}
}

参数	定义	默认值
required	是否是必填项	-
max	输入的最大值，一般和min混合使用	-
min	输入的最小值，一般和max混合使用	-
pattern	正则校验规则	-
message	校验失败的提示词	校验不通过