【校验】el-form校验 数字 字母 （pattern写法）

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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<template>
<div>
<!-- <my-table :data="dataForm3">
<el-table-column label="商品" prop="name"></el-table-column>
<el-table-column label="价格" prop="price"></el-table-column>
</my-table> -->
<el-form
:inline="true"
:model="formInline"
class="demo-form-inline"
ref="formInline"
:rules="rules"
>
<el-form-item label="活动区域0" prop="name">
<el-input v-model="formInline.name" placeholder="请输入"></el-input>
</el-form-item>
<el-form-item label="活动区域1" prop="where">
<el-input v-model="formInline.where" placeholder="请输入"></el-input>
</el-form-item>
<el-form-item label="活动区域2" prop="who">
<el-input v-model="formInline.who" placeholder="请输入"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('formInline')"
>查询子组件</el-button
>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: "formInline",
data() {
var validator1 = (rule, val, callback) => {
if (!val) {
callback(new Error("请输入"));
} else {
const reg = /^([0-9]+([/]|[-]|[ ])?)*$/;
if (reg.test(val)) {
return callback();
} else {
callback(new Error("格式错误，仅支持输入纯数字、空格、“-”、“/”"));
}
}
};
var validator2 = (rule, val, callback) => {
if (!val) {
callback(new Error("请输入"));
} else {
const reg = /^([a-zA-z]+|[0-9]+|[0-9a-zA-z])*$/; //
if (reg.test(val)) {
return callback();
} else {
callback(new Error("格式错误，仅支持输入纯数字、字母"));
}
}
};
var validator3 = (rule, val, callback) => {
if (!val && !this.formLabelAlign.phone) {
callback(new Error("请输入"));
return false;
}
const reg = /^[0-9]([0-9-[ ]]?)*$/;
if (reg.test(val)) {
callback();
} else {
callback(new Error("格式错误，仅支持输入纯数字、空格、“-”"));
}
};
return {
dataForm3: [
{ id: "ida1111", name: "测试数据名称1", price: "测试数据地址1" },
{ id: "ida1112", name: "测试数据名称2", price: "测试数据地址2" },
{ id: "ida1113", name: "测试数据名称3", price: "测试数据地址3" },
{ id: "ida1114", name: "测试数据名称4", price: "测试数据地址4" },
{ id: "id1a15", name: "测试数据名称5", price: "测试数据地址5" },
],
rules: {
name: [{ required: true, validator: validator1, trigger: "blur" }],
where: [{ required: true, validator: validator2, trigger: "blur" }],
who: [{ required: true, validator: validator3, trigger: "change" }],
},
formInline: {
name: "",
where: "",
who: "",
},
};
},
mounted() {},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert("submit!");
} else {
console.log("error submit!!");
return false;
}
});
},
},
};
</script>
<style lang="scss" scoped></style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 rules: [{
required: true,
message: '请选择服务类型',
trigger: "blur"
},
{
min: 3,
max: 5,
message: "长度在 3 到 5 个字符",
trigger: "blur"
},
{
pattern: /(^[1-9]([0-9]+)?(.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9].[0-9]([0-9])?$)/,
message: '请输入数字，保留2位小说',
},
],
},