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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
| /**
| * CFormItem
| * @author Tevin
| * @tutorial rules see https://github.com/yiminghe/async-validator#type
| */
|
| <template>
| <view class="c-form-item">
| <slot :itemData="itemData" />
| </view>
| </template>
|
| <script>
| import Schema from 'async-validator';
| import { validateMsgs } from './validateMsgs.js';
|
| export default {
| name: 'CFormItem',
| props: {
| name: String,
| label: String,
| required: Boolean,
| rules: Array,
| formData: Object,
| },
| data() {
| return {
| error: false,
| };
| },
| computed: {
| itemData() {
| return {
| formData: this.formData,
| name: this.name,
| label: this.label,
| required: this.isRequired,
| error: this.error,
| onChange: (evt) => this.onChange(evt),
| };
| },
| isRequired() {
| if (this.required) {
| return true;
| } else {
| if (!this.rules || this.rules.length === 0) {
| return false;
| } else if (this.rules.length > 0) {
| for (let rule of this.rules) {
| if (rule.required) {
| return true;
| }
| }
| return false;
| }
| }
| },
| },
| methods: {
| onChange(evt) {
| // 当类型为 object 时，必须为简单 object
| if (Object.prototype.toString.call(evt) === '[object Object]') {
| const hasOwn = Object.prototype.hasOwnProperty;
| if (
| evt.constructor &&
| !hasOwn.call(evt, 'constructor') &&
| !hasOwn.call(evt.constructor.prototype, 'isPrototypeOf')
| ) {
| throw new Error('错误的表单项 onChange 参数类型！（At: ' + this.name + '）');
| return;
| }
| }
| // 未改变值不触发
| if (this.formData[this.name] === evt) {
| return;
| }
| this.formData.$handleChange({
| [this.name]: evt,
| });
| },
| },
| mounted() {
| this.$nextTick(() => {
| // 未设置验证
| if (!this.required && !this.rules) {
| this.formData.$regItemValidator(this.name, () => {
| this.error = false;
| return Promise.resolve({
| name: this.name,
| passed: true,
| });
| });
| } else {
| // 验证规则
| const descriptor = this.rules || [];
| if (this.required) {
| descriptor.unshift({
| required: true,
| });
| }
| const validator = new Schema({
| [this.name]: descriptor,
| });
| // 汉化通用验证消息
| validator.messages(validateMsgs);
| // 注册验证
| let errTimer = null;
| this.formData.$regItemValidator(this.name, () => {
| return validator
| .validate({
| [this.name]: this.formData[this.name],
| })
| .then(
| (res) => {
| this.error = false;
| return {
| name: this.name,
| passed: true,
| };
| },
| ({ errors, fields }) => {
| this.error = true;
| clearTimeout(errTimer);
| errTimer = setTimeout(() => {
| this.error = false;
| }, 5000);
| return {
| name: this.name,
| passed: false,
| msg: errors[0].message.replace(
| this.name,
| this.label || this.name
| ),
| };
| }
| );
| });
| }
| });
| },
| beforeDestroy() {
| this.formData.$regItemValidator(this.name, null);
| },
| };
| </script>
|
|
