uni app如何优雅的进行表单验证(正则校验）

超、凢脫俗 2022-10-08 05:49 1481阅读 0赞

最近我们公司也是做了一个审批流的app，在提交申请的时候，需要对申请人提交的申请信息进行表单信息认证。(我自己对正则表达式的理解更是自己的难言之隐)。所以最近我在看uni app看插件市场的时候看到一个插件，感觉一下子有了思路，在这里就分享给大家。

*  下面是一些常规的正则验证规则，大家可以直接将这些代码放到公共js文件然后在main.js页面全局注册就行了。

const numberReg = /^-?[1-9][0-9]?.?[0-9]*$/
    const intReg = /^-?[1-9][0-9]*$/
    const phoneReg = /^1[0-9]{10,10}$/
    const emailReg = /^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
    const pwdReg = /^.{6,16}$/
    const inviteCodeReg = /^[a-zA-Z0-9]{6,16}$/
    const UnifiedCodeReg =  /^([0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}|[1-9]\d{14})$/
    const websiteReg=/^((https|http|ftp|rtsp|mms){0,1}(:\/\/){0,1})www\.(([A-Za-z0-9-~]+)\.)+([A-Za-z0-9-~\/])+$/
    
    export default { 
    	isNumber: function(val) { 
    		return numberReg.test(val)
    	},
    	isInt: function(val) { 
    		return intReg.test(val)
    	},
    	// 验证手机号
    	isPhone: function(val) { 
    		return phoneReg.test(val)
    	},
    	// 验证邮箱
    	isEmail: function(val) { 
    		return emailReg.test(val)
    	},
    	isPwd: function(val) { 
    		return pwdReg.test(val)
    	},
    	isInviteCode: function(val) { 
    		return inviteCodeReg.test(val)
    	},
    	// 验证统一社会信用代码
    	isUnifiedCode: function(val) { 
    		return UnifiedCodeReg.test(val)
    	},
    	// 网址校验
    	iswebsite:function(val){ 
    		return websiteReg.test(val)
    	},
    	
    	validate: function(data, rules) { 
    		let res = {  isOk: true, errmsg: '' }
    		if (!rules || !rules.length) { 
    			return res
    		}
    		for (let rule of rules) { 
    			// rule: {name:'', type:'', errmsg:'', min:1, max:2, eq:'', required:Boolean, regex:''}
    			if (!rule || !rule.name || !rule.type) { 
    				continue
    			}
    			
    			// 如果值不存在
    			if (!data[rule.name]) { 
    				// 如果是必填项就返回错误提示，required可以作为type是为了不同的type能给用户不同的提示
    				if (rule.type === 'required' || rule.required) { 
    					res = {  isOk: false, errmsg: rule.errmsg }
    					if (!res.errmsg) { 
    						res.errmsg = '请正确输入所有数据' //默认提示
    					}
    					return res
    				}
    				// 如果不是必填项就跳过
    				continue
    			}
    			switch (rule.type) { 
    				// required 上面已经判断过了
    				case 'equals':
    				case 'eq':
    					if (data[rule.name] !== data[rule.eqName]) { 
    						res = {  isOk: false, errmsg: rule.errmsg }
    					}
    				break
    				case 'number':
    					if (!numberReg.test(data[rule.name])) { 
    						res = {  isOk: false, errmsg: rule.errmsg }
    					}
    				break
    				case 'int':
    					if (!intReg.test(data[rule.name])) { 
    						res = {  isOk: false, errmsg: rule.errmsg }
    					}
    				break
    				case 'phone':
    					if (!phoneReg.test(data[rule.name])) { 
    						res = {  isOk: false, errmsg: rule.errmsg }
    					}
    				break
    				case 'email':
    					if (!emailReg.test(data[rule.name])) { 
    						res = {  isOk: false, errmsg: rule.errmsg }
    					}
    				break
    				case 'pwd':
    					if (!pwdReg.test(data[rule.name])) { 
    						res = {  isOk: false, errmsg: rule.errmsg }
    					}
    				break
    				case 'inviteCode':
    					if (!inviteCodeReg.test(data[rule.name])) { 
    						res = {  isOk: false, errmsg: rule.errmsg }
    					}
    				break
    				case 'range': // 数字类型的值取值范围
    					// {name: 'xxx', type: 'range', min: 6, max: 6, required: true, errmsg: 'xxx'}
    					let val = data[rule.name]
    					if (val) { 
    						if (numberReg.test(val)) { 
    							if (rule.min && val < rule.min) { 
    								res = {  isOk: false, errmsg: rule.errmsg }
    							} else if (rule.max && val > rule.max) { 
    								res = {  isOk: false, errmsg: rule.errmsg }
    							}
    						} else { 
    							res = {  isOk: false, errmsg: rule.errmsg }
    						}
    					}
    				break
    				case 'lengthRange': // 字符串长度取值范围
    					// {name: 'xxx', type: 'lengthRange', min: 6, max: 6, errmsg: 'xxx'}
    					let le = data[rule.name] ? data[rule.name].length : 0
    					if (rule.min && le < rule.min) { 
    						res = {  isOk: false, errmsg: rule.errmsg }
    					} else if (rule.max && le > rule.max) { 
    						res = {  isOk: false, errmsg: rule.errmsg }
    					}
    				break
    				case 'regex': // 自定义正则表达式
    					// {name: 'xxx', type: 'regex', regex: /^1[0-9]{10,10}$/, errmsg: 'xxx'}
    					if (rule.regex && !rule.regex.test(data[rule.name])) { 
    						res = {  isOk: false, errmsg: rule.errmsg }
    					}
    				break
    			}
    			// 发现任何一个错误就立即返回，后面的不再判断
    			if (!res.isOk) { 
    				if (!res.errmsg) { 
    					res.errmsg = '请正确输入所有数据' //默认提示
    				}
    				return res
    			}
    		}
    		return res
    	}
    }

下面是这个插件的链接，我放在下面，大家可以参考一下，希望能给大家解决一些问题。

[点击跳转][Link 1]

[Link 1]: https://ext.dcloud.net.cn/plugin?id=746