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

痛定思痛。 2022-10-30 12:28 451阅读 0赞

### 目录 ###

*  前言
 *  思路
 *  代码
 *   *  公共校验js
     *  挂载公共方法
     *  校验代码使用

# 前言 #

使用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
    					})
    				}
    			})
    		}
    	}
    }

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