复制代码
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>
pattern写法
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17rules: [{ 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位小说', }, ], },
最后
以上就是俏皮跳跳糖最近收集整理的关于【校验】el-form校验 数字 字母 (pattern写法)的全部内容,更多相关【校验】el-form校验内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
发表评论 取消回复