0
点赞
收藏
分享

微信扫一扫

由于uni-app动态校验数据出现问题,以至于自己写校验方法

刘员外__ 2022-02-17 阅读 48

由于使用uni-app动态校验数据 官网 上写的一直报错,错误与正确之间反复横跳,以至于只好自己写

该校验方法是在提交的时候判断是否为空以及其他规则

// obj:数据对象
// rules: 校验规则
// order: 需要校验的字段

const isValid = (v) => {
	let val = v;
	if (typeof v == 'string') {
		val = v.trim();
	}
	if ((v instanceof Array) && !v.length) {
		return false;
	}
	return val !== null && val !== NaN && val !== undefined && val !== ''
}


// 表单数据验证
const validate = (obj, rules, order) => {
	let error = null;
	let keys = Object.keys(rules);
	if (order && order.length) {
		let otherKeys = keys.filter(item => order.indexOf(item) < 0);
		keys = order.concat(otherKeys);
	}
	keys.forEach((key) => {
		let value = obj[key];
		if (rules[key] && rules[key].length) {
			rules[key].forEach(item => {
				if (!error) {
					const {
						type,
						msg
					} = item;
					switch (type) {
						case 'number': {
							if (isNaN(Number(value)) || /\.$/.test(value) || /^00/.test(value)) {
								error = msg;
							}
							break;
						}
						case 'max': {
							if (Number(value) > 100000) {
								error = msg;
							}
							return;
						}
						case 'money': {
							if (isNaN(Number(value)) || /\.$/.test(value) || /^00/.test(value)) {
								error = msg;
							}
							if (Number(Number(value).toFixed(2)) != Number(value)) {
								error = msg;
							}
							break;
						}
						case 'reg': {
							if (item.reg && !item.reg.test(value)) {
								error = msg;
							}
							break;
						}
						case 'custom': {
							if (item.custom && !item.custom(value)) {
								error = msg;
							}
							break;
						}
						default: {
							if (!isValid(value)) {
								error = msg;
							}
							break;
						}
					}
				}

			})
		}
	})
	if (error) {
		uni.showToast({
			title: error,
			icon: 'none',
			duration: 3000,
		})
	}

	return !error;
}

数据:

// 其中 educationalList 里面是动态数据,可以动态增加删除
formdata: {
	name: '',
	phone: '',
	email: '',
	postList: [],
	educationalList: [
		{
			country: '',
			university: '',
			major: '',
			...
		}
	],
	...
}

校验规则格式如下:

// 校验规则
let formRules = {
	// 对照片字段进行必填验证
	'postList': [{
		msg: '请上传头像'
	}],
	// 对姓名(中文)字段进行必填验证
	'name': [{
			msg: '请输入1-10个字符长度的中文姓名',
			type: 'reg',
			reg: /^[\u4e00-\u9fa5],{1,10}$/
		},
		// {
		// 	minLength: 1,
		// 	maxLength: 10,
		// 	msg: '中文姓名长度在 {minLength} 到 {maxLength} 个字符'
		// }
	],
	
	'country': [{
		msg: '国别不能为空'
	}],
	// 对电话字段进行必填验证
	'phone': [{
		msg: '请输入电话号',
		type: 'reg',
		reg: /^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\\d{8}$/
	}, ],
	// 对邮箱字段进行必填验证
	'email': [{
			msg: '请输入邮箱',
			type: 'reg',
			reg: /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$ /
		}
	],
	...
}

校验字段:

// 校验字段的格式是个字符串数组
let eduRulesField = ['country','university','major', 'eduDateRange', 'academicDegree']

使用方法

// 在提交的时候使用
// 如果校验动态数据需要循环遍历
// 如果校验固定的数据,则无需遍历
this.formData.educationalList.forEach(item => {
	if (!util.validate(item, eduRules, eduRulesField)) return;
})
if (!util.validate(this.formData, formRules, formRulesField)) return;

注意:

如果为空或者不符合规则,他直接弹出的 showToast 提示,如果需要其他样式,可以自行设计哈
举报

相关推荐

0 条评论