由于使用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 提示,如果需要其他样式,可以自行设计哈