Skip to content

Commit a7403cc

Browse files
wlxuquwlxuqu
committed
完善表单验证功能
1 parent 21a2855 commit a7403cc

File tree

38 files changed

+1411
-146
lines changed

38 files changed

+1411
-146
lines changed

‎pages.json

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -457,6 +457,13 @@
457457
"navigationBarTitleText": "form-表单"
458458
}
459459
},
460+
// select-列选择器
461+
{
462+
"path": "select/index",
463+
"style": {
464+
"navigationBarTitleText": "select-列选择器"
465+
}
466+
},
460467
// slider-滑动选择器
461468
{
462469
"path": "slider/index",
@@ -754,9 +761,6 @@
754761
"color": "#909399",
755762
"selectedColor": "#303133",
756763
"backgroundColor": "#FFFFFF",
757-
// #ifdef APP-PLUS
758-
"blurEffect": "light",
759-
// #endif
760764
"borderStyle": "black",
761765
"list": [{
762766
"pagePath": "pages/example/components",

‎pages/componentsA/form/index.vue

Lines changed: 267 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,60 +1,282 @@
11
<template>
2-
<view class="">
3-
<u-form :model="model" :rules="rules">
4-
<u-form-item :label="label" prop="name">
5-
<u-input v-model="model.name" />
2+
<view class="wrap">
3+
<u-form :model="model" :rules="rules" ref="uForm">
4+
<u-form-item label="姓名" prop="name">
5+
<u-input :border="border" placeholder="请输入姓名" v-model="model.name" type="text"></u-input>
6+
</u-form-item>
7+
<u-form-item label="性别" prop="sex">
8+
<u-input :border="border" type="select" :select-open="actionSheetShow" v-model="model.sex" placeholder="请选择性别" @click="actionSheetShow = true"></u-input>
9+
</u-form-item>
10+
<u-form-item label="简介" prop="intro">
11+
<u-input type="textarea" placeholder="请填写简介" v-model="model.intro" />
12+
</u-form-item>
13+
<u-form-item label="水果品种" label-width="150" prop="likeFruit">
14+
<u-checkbox-group @change="checkboxGroupChange">
15+
<u-checkbox v-model="item.checked" v-for="(item, index) in checkboxList" :key="index" :name="item.name">{{ item.name }}</u-checkbox>
16+
</u-checkbox-group>
17+
</u-form-item>
18+
<u-form-item label="结算方式" prop="payType" label-width="150">
19+
<u-radio-group v-model="radio" @change="radioGroupChange">
20+
<u-radio shape="circle" v-model="item.checked" v-for="(item, index) in radioList" :key="index" :name="item.name">{{ item.name }}</u-radio>
21+
</u-radio-group>
22+
</u-form-item>
23+
<u-form-item label="所在地区" prop="region" label-width="150">
24+
<u-input :border="border" type="select" :select-open="pickerShow" v-model="model.region" placeholder="请选择地区" @click="pickerShow = true"></u-input>
25+
</u-form-item>
26+
<u-form-item label="所在地区" prop="goodsType" label-width="150">
27+
<u-input :border="border" type="select" :select-open="selectShow" v-model="model.goodsType" placeholder="请选择商品类型" @click="selectShow = true"></u-input>
628
</u-form-item>
729
</u-form>
30+
<view class="agreement">
31+
<u-checkbox v-model="check" @change="checkboxChange"></u-checkbox>
32+
<view class="agreement-text">
33+
勾选代表同意uView的版权协议
34+
</view>
35+
</view>
36+
<u-button @click="submit">提交</u-button>
37+
<u-action-sheet :list="actionSheetList" v-model="actionSheetShow" @click="actionSheetCallback"></u-action-sheet>
38+
<u-select mode="single-column" :list="selectList" v-model="selectShow" @confirm="selectConfirm"></u-select>
39+
<u-picker mode="region" v-model="pickerShow" @confirm="regionConfirm"></u-picker>
840
</view>
941
</template>
1042

1143
<script>
12-
export default {
13-
data() {
14-
return {
15-
model: {
16-
name: ''
17-
},
18-
rules: {
19-
name: [
20-
{ required: true, message: '请输入活动名称', trigger: 'change' },
21-
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'change' }
22-
]
23-
},
24-
label: 'name'
25-
};
26-
},
27-
computed: {
28-
current() {
29-
return this.show ? 0 : 1;
30-
}
31-
},
32-
methods: {
33-
showChange(index) {
34-
this.show = !index;
35-
},
36-
titleChange(index) {
37-
this.showTitle = !index;
38-
this.show = true;
44+
export default {
45+
data() {
46+
let that = this;
47+
return {
48+
model: {
49+
name: '',
50+
sex: '',
51+
likeFruit: '',
52+
intro: '',
53+
payType: '支付宝',
54+
agreement: false,
55+
region: '',
56+
goodsType: '',
57+
3958
},
40-
contentChange(index) {
41-
this.contentSlot = !index;
42-
this.content = !index;
43-
this.show = true;
44-
},
45-
asyncChange(index) {
46-
this.show = true;
47-
this.asyncClose = !index;
59+
selectList: [
60+
{
61+
value: '电子产品',
62+
label: '电子产品'
63+
},
64+
{
65+
value: '服装',
66+
label: '服装'
67+
},
68+
{
69+
value: '工艺品',
70+
label: '工艺品'
71+
}
72+
],
73+
rules: {
74+
name: [
75+
{
76+
required: true,
77+
message: '请输入姓名',
78+
trigger: 'blur' ,
79+
},
80+
{
81+
min: 3,
82+
max: 5,
83+
message: '姓名长度在3到5个字符',
84+
trigger: 'change,blur',
85+
},
86+
{
87+
validator: (rule, value, callback) => {
88+
// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
89+
//return that.$u.test.chinese(value);
90+
},
91+
validator1: 33,
92+
message: '姓名必须为中文',
93+
// 触发器可以同时用blur和change，二者之间用英文逗号隔开
94+
trigger: 'change,blur',
95+
}
96+
],
97+
sex: [
98+
{
99+
required: true,
100+
message: '请选择性别',
101+
trigger: 'change'
102+
},
103+
],
104+
intro: [
105+
{
106+
required: true,
107+
message: '请填写简介'
108+
},
109+
{
110+
min: 5,
111+
message: '简介不能少于5个字',
112+
trigger: 'change' ,
113+
},
114+
// 正则校验示例，此处用正则校验是否中文，此处仅为示例，因为uView有this.$u.test.chinese可以判断是否中文
115+
{
116+
pattern: "/^[\u4e00-\u9fa5]+$/gi",
117+
message: '简介只能为中文',
118+
trigger: 'change',
119+
},
120+
],
121+
likeFruit: [
122+
{
123+
required: true,
124+
message: '请选择您喜欢的水果',
125+
trigger: 'change',
126+
type: 'array',
127+
}
128+
],
129+
payType: [
130+
{
131+
required: true,
132+
message: '请选择任意一种支付方式',
133+
trigger: 'change',
134+
}
135+
],
136+
region: [
137+
{
138+
required: true,
139+
message: '请选择地区',
140+
trigger: 'change',
141+
}
142+
],
143+
goodsType: [
144+
{
145+
required: true,
146+
message: '请选择商品类型',
147+
trigger: 'change',
148+
}
149+
],
48150
},
49-
confirm() {
50-
setTimeout(() => {
51-
this.show = false;
52-
}, 2000)
53-
}
151+
border: false,
152+
check: false,
153+
selectStatus: 'close',
154+
checkboxList: [
155+
{
156+
name: '荔枝',
157+
checked: false,
158+
disabled: false
159+
},
160+
{
161+
name: '香蕉',
162+
checked: false,
163+
disabled: false
164+
},
165+
{
166+
name: '橙子',
167+
checked: false,
168+
disabled: false
169+
},
170+
{
171+
name: '草莓',
172+
checked: false,
173+
disabled: false
174+
}
175+
],
176+
radioList: [
177+
{
178+
name: '支付宝',
179+
checked: true,
180+
disabled: false
181+
},
182+
{
183+
name: '微信',
184+
checked: false,
185+
disabled: false
186+
},
187+
{
188+
name: '银联',
189+
checked: false,
190+
disabled: false
191+
},
192+
{
193+
name: '现金',
194+
checked: false,
195+
disabled: false
196+
}
197+
],
198+
radio: '支付宝',
199+
actionSheetList: [
200+
{
201+
text: '男'
202+
},
203+
{
204+
text: '女'
205+
},
206+
{
207+
text: '保密'
208+
}
209+
],
210+
actionSheetShow: false,
211+
pickerShow: false,
212+
selectShow: false,
213+
214+
215+
};
216+
},
217+
computed: {
218+
current() {
219+
return this.show ? 0 : 1;
220+
}
221+
},
222+
onLoad() {
223+
224+
},
225+
methods: {
226+
submit() {
227+
this.$refs.uForm.validate(valid => {
228+
if (valid) {
229+
if(!this.model.agreement) return this.$u.toast('请勾选协议');
230+
console.log('验证通过');
231+
} else {
232+
console.log('验证失败');
233+
}
234+
});
235+
},
236+
// 点击actionSheet回调
237+
actionSheetCallback(index) {
238+
this.model.sex = this.actionSheetList[index].text;
239+
},
240+
// checkbox选择发生变化
241+
checkboxGroupChange(e) {
242+
this.model.likeFruit = e;
243+
},
244+
// radio选择发生变化
245+
radioGroupChange(e) {
246+
this.model.payType = e;
247+
},
248+
// 勾选版权协议
249+
checkboxChange(e) {
250+
this.model.agreement = e.value;
251+
},
252+
// 选择地区回调
253+
regionConfirm(e) {
254+
this.model.region = e.province.label + '-' + e.city.label + '-' + e.area.label;
255+
},
256+
// 选择商品类型回调
257+
selectConfirm(e) {
258+
this.model.goodsType = '';
259+
e.map((val, index) => {
260+
this.model.goodsType += this.model.goodsType == '' ? val.label : '-' + val.label;
261+
})
54262
}
55-
};
263+
}
264+
};
56265
</script>
57266

58267
<style scoped lang="scss">
268+
.wrap {
269+
padding: 30rpx;
270+
}
271+
272+
.agreement {
273+
display: flex;
274+
align-items: center;
275+
margin: 40rpx 0;
59276
277+
.agreement-text {
278+
padding-left: 8rpx;
279+
color: $u-tips-color;
280+
}
281+
}
60282
</style>

‎pages/componentsA/keyboard/index.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
</view>
1616
<view class="u-config-wrap">
1717
<view class="u-config-title u-border-bottom">
18-
参数配置
18+
参数配置
1919
</view>
2020
<view class="u-config-item">
2121
<view class="u-item-title">键盘开关</view>

0 commit comments

Comments
 (0)