数据校验

一、自带的数据校验

rules: {
//验证非空和长度
one: [
{required: true, message: "站点名称不能为空", trigger: "blur"},
{min: 3, max: 5, message: '长度在 3 到 5 个字符',trigger: 'blur' }
],
//验证数值
two: [
{ type: 'number', message: '请输入数字类型',trigger: "blur"}
],
//验证日期
three:[
{ type: 'date', required: true, message: '请选择日期', trigger: 'change' }
],
//验证多选
four: [
{ type: 'array', required: true, message: '请选择一个', trigger: 'change' }
],
//验证邮箱
five: [
{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
],
// 验证手机号
telephone: [
{pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
message: "请输入正确的手机号码",
trigger: "blur"}
],
// 验证身份证号
telephone: [
{pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
message: "请输入正确的身份证号",
trigger: "blur"}
],
// 验证经度 整数部分为0-180小数部分为0到7位
longitude: [
{pattern: /^(\-|\+)?(((\d|[1-9]\d|1[0-7]\d|0{1,3})\.\d{0,7})|(\d|[1-9]\d|1[0-7]\d|0{1,3})|180\.0{0,6}|180)$/,
message: "整数部分为0-180,小数部分为0到7位",
trigger: "blur"}
],
// 验证维度 整数部分为0-90小数部分为0到7位
latitude: [
{pattern: /^(\-|\+)?([0-8]?\d{1}\.\d{0,7}|90\.0{0,6}|[0-8]?\d{1}|90)$/,
message: "整数部分为0-90,小数部分为0到7位",
trigger: "blur"}
]
}

二、常用自定义的校验规则

const validateValidity = (rule, value, callback) =>{
if (!/(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/.test(value)) {
callback(new Error('最多只能输入两位小数'));
}else{
callback();
}
};
export function checkMinVal(rule, value,callback) {
if(value <0) {
callback(new Error('请输入正整数'));
} else {
callback();
}
}
export function checkMaxVal(rule, value,callback) {
if(value >= 2147483647) {
callback(new Error('输入的数字过大'));
} else {
callback();
}
}

//将数据的数据调用controller验证是否存在
export function checkDay(rule, value, callback) {
selectDay(value).then(response => {
const code = response.data.code;
console.log(code);
if (code == 500) {//数据已存在
callback(new Error('该数据已存在'));
} else {
callback();
}
})
}

三、rule中的引用

rules: {
idCard: [
{
pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
message: "请输入正确的身份证号",
trigger: "blur"
}
],
day: [
{ required: true, message: "数据不能为空", trigger: "blur" },
{validator: checkMinVal, trigger: 'blur' },
{validator: checkMaxVal, trigger: 'blur' },
{validator: checkDay, trigger: 'blur' },
],
integral: [
{validator: checkMinVal, trigger: 'blur' },
{validator: checkMaxVal, trigger: 'blur' },
]
}
————————————————

原文链接：https://blog.csdn.net/qq_33007465/article/details/118726298