# 常用校验规则
// 限制输入数字包括小数
<el-input v-model="formVal.explosive_order_num" placeholder="请输入订单数" @input="handleInput($event, 'explosive_order_num')" />
const handleInput = (value, field) => {
// 只允许输入数字和一个小数点
const regex = /^[0-9]+(\.[0-9]{0,2})?$/
// 去除输入中的中文字符
let sanitizedValue = value.replace(/[^\d.]/g, "")
if (regex.test(sanitizedValue)) {
formVal.value[field] = sanitizedValue
} else {
formVal.value[field] = formVal.value[field].slice(0, -1)
}
}
// 最大值
<el-input v-model="formVal.validity_hours" oninput="if(value){value=value.replace(/[^\d]/g,1); if(Number(value)<=0){value=0}} if(Number(value)>24){value=24}" placeholder="请输入邀请有效时长" max="24" min="1" />
// 校验手机号 带86
const validatePhone = (rule, value, callback) => {
const regPhone = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/
if (!regPhone.test(value)) {
callback(new Error("请输入正确的手机号"))
} else {
callback()
}
}
// 手机号
mobile: [
{ required: true, message: " ", trigger: "blur" },
{ pattern: /^1[3-9]\d{9}$/, message: "请输入11位，有效的手机号", trigger: "blur" }
],
// 数字带小数
company_capital: [
{ required: true, message: "请输入注册资本", trigger: "blur" },
{ pattern: /^\d+(\.\d+)?$/, message: "请输入有效的数字", trigger: "blur" }
],
// 4-6位验证码
new_captcha: [
{ required: true, message: " ", trigger: "blur" },
{ pattern: /^\d{4,6}$/, message: "验证码应为4到6位数字", trigger: "blur" }
],
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
完整表单校验示例
let rules = reactive({
logo: [{ required: true, message: "请上传团队头像", trigger: ["blur", "change"] }],
name: [{ required: true, message: "请输入团队名称", trigger: "blur" }],
area: [{ required: true, message: "请选择所在城市", trigger: ["blur", "change"] }],
desc: [{ required: true, message: "请输入团队介绍", trigger: "blur" }],
legal_name: [
{
required: true,
validator: (rule, value, callback) => {
return new Promise((resolve, reject) => {
if (value == null || value == "" ){
reject(callback(`请输入${insInfo.type == 1 ? "法人" : ""}姓名`))
} else {
resolve(callback())
}
})
},
trigger: "blur"
}
],
idcard: [
{
required: true,
validator:(rule, value, callback) => {
return new Promise((resolve, reject) => {
// 校验身份证格式是否合法
const validateIDCard = (id) => {
const city = { 11: "北京", 12: "天津", 13: "河北", 14: "山西", 15: "内蒙古", 21: "辽宁", 22: "吉林", 23: "黑龙江", 31: "上海", 32: "江苏", 33: "浙江", 34: "安徽", 35: "福建", 36: "江西", 37: "山东", 41: "河南", 42: "湖北", 43: "湖南", 44: "广东", 45: "广西", 46: "海南", 50: "重庆", 51: "四川", 52: "贵州", 53: "云南", 54: "西藏", 61: "陕西", 62: "甘肃", 63: "青海", 64: "宁夏", 65: "新疆", 71: "台湾", 81: "香港", 82: "澳门", 91: "国外" }
const birthday = id.substr(6, 8).replace(/(.{4})(.{2})/, "$1-$2-")
const isValidDate = (date) => !isNaN(Date.parse(date))
// 正则匹配身份证格式
const reg = /^\d{6}(18|19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/i
if (!reg.test(id) || !city[id.substr(0, 2)]) {
return false
}
if (!isValidDate(birthday)) {
return false
}
// 验证最后一位校验码
const factors = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2]
const parity = ["1", "0", "X", "9", "8", "7", "6", "5", "4", "3", "2"]
const sum = id.substr(0, 17).split("").reduce((acc, cur, idx) => acc + cur * factors[idx], 0)
return parity[sum % 11] === id[17]
}
if (value == null || value == "" ){
callback(`请输入${insInfo.type == 1 ? "法人" : ""}身份证号`)
} else if (!validateIDCard(value)) {
callback("请输入合法的身份证号")
} else {
resolve(callback())
}
})
},
trigger: "blur"
}
],
idcard_time_type: [{ required: true, message: "请选择身份证有效期类型", trigger: "blur" }],
contact_name: [{ required: true, message: "请输入管理员姓名", trigger: "blur" }],
contact_phone: [{ required: true, message: "请输入管理员电话", trigger: "blur" }],
business_license: [{ required: true, message: "请上传营业执照扫描证件", trigger: ["blur", "change"] }],
uscc: [{ required: true, message: "请输入统一社会信用代码", trigger: "blur" }],
company: [{ required: true, message: "请输入公司名称", trigger: "blur" }],
company_area: [{ required: true, message: "请选择注册地址", trigger: ["blur", "change"] }],
company_addr: [{ required: true, message: "请输入详细地址，省市区/县无需重复输入", trigger: "blur" }],
company_capital: [
{ required: true, message: "请输入注册资本", trigger: "blur" },
{ pattern: /^\d+(\.\d+)?$/, message: "请输入有效的数字", trigger: "blur" }
],
company_date: [{ required: true, message: "请选择成立日期/注册日期", trigger: ["blur", "change"] }],
bl_date_type: [{ required: true, message: "请选择营业执照有效期类型", trigger: ["blur", "change"] }],
main_business: [{ required: true, message: "请输入主营业务介绍", trigger: "blur" }],
main_business_file: [{ required: true, message: "请上传主营业务资料", trigger: ["change", "blur"] }],
company_desc: [{ required: true, message: "请输入公司简介", trigger: "blur" }],
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
# 校验注意事项
# 1. rules 只对只对表单生效 意味着非表单组件是无法根据 trigger 去触发的
需要完成操作后 例如上传 去手动触发更新 validateField 给 form 绑定 ref，使用 formRef.value.validateField(elval) 触发验证
有时可能会触发异步错误，目前接收回调即可
formRef.value.validateField("main_business_file", (res) => {
console.log(res)
})
1
2
3
2
3
注意事项
- 确保 prop 属性一致: el-form-item 的 prop 属性必须与 rules 中的字段名称一致，以便正确关联验证规则。
- 动态修改规则: 如果需要根据条件动态修改 rules，确保完全替换 rules 对象，以触发 Vue 的响应式更新。（尝试过，但是表单会触发验证，无法利用
formRef.value !== undefined ? formRef.value.resetFields() : "" //清空校验规则）清除，待尝试 - 使用 $nextTick: 在某些情况下，使用 $nextTick 确保 DOM 更新后再进行验证，可以避免规则未生效的问题。