uniapp-uview的表单校验——同步，异步，图片必输，数字校验爬坑

<u-form :model="form" ref="uForm">
	<u-form-item label="电话" prop="faPhone">
		<u-input maxlength="20" v-model="form.faPhone" placeholder="请输入电话" />
	</u-form-item>
	<u-form-item label="头像" prop="touxiang">
		<u-upload :action="actionAvatar" ref="touxiang" width="200" height="142" :custom-btn="true"
			del-bg-color="#666666" max-count="1" :limitType="['png', 'jpg']" @on-success="onChange" :before-remove="deleteImg">
			<view slot="addBtn" class="slot-btn">
				<view class="addBox">
					<u-icon name="camera" size="60" color="#c0c4cc"></u-icon>
					<view class="">
						选择图片
					</view>
				</view>
			</view>
		</u-upload>
	</u-form-item>
	<u-form-item label="需求总量" prop="num">
		<!-- 测试发现，当input框限定type为number时，在修改的场景下，即便输入框有默认值，也会报空不通过校验 -->
		<u-input v-model="form.num" type="number" placeholder="请输入所需需求总量" />
	</u-form-item>
</u-form>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

export default {
	data(){
		return {
			rules:{
				faPhone: [
					{
						// 自定义验证函数，同步校验
						validator: (rule, value, callback) => {
							// 上面有说，返回true表示校验通过，返回false表示不通过
							// this.$u.test.mobile()就是返回true或者false的，uview自带的校验方法，此处也可以自己写校验函数
							return this.$u.test.mobile(value) || this.$u.test.landline(value);
						},
						message: '请输入xxx-xxxx或者手机号',
						// 触发器可以同时用blur和change
						trigger: ['change', 'blur'],
					},{
						//异步校验，checkHandle为请求后台的函数，跟后台约定状态码为400则校验不通过
						asyncValidator: (rule, value, callback) => {
							this.checkHandle(value, (res) => {
								if (res.code == 400) {
									// 如果验证不通过，需要在callback()抛出new Error('错误提示信息')
									callback(new Error('电话已存在，请更换'));
								} else {
									// 如果校验通过，也要执行callback()回调
									callback();
								}
							})
						},
						trigger: ['blur'],
					}
				],
				touxiang: [
					{
						validator: (rule, value, callback) => {
							if (!this.form.avatarUrl) {
								return false
							} else {
								return true
							}
						},
						message: '请上传头像',
						trigger: ['change', 'blur'],
					}
				],
				num: [
					{
						required: true,
						//测试发现，当input框限定type为number时，在修改的场景下，即便输入框有默认值，也会报空不通过校验
						//给rules添加transform转为字符可解决报错，猜测应该是类型不匹配造成的验证不通过
						transform(value) {
							return String(value);
						},
						message: '请输入总量',
						trigger: ['change', 'blur'],
					}
				],
			}
		}
	},
	mounted() {
		//设置校验规则
		this.$refs.uForm.setRules(this.rules);
	},
	methods:{
		onChange(res, index, lists, name) {
			this.form.avatarUrl = res.avatarUrl;
		},
		deleteImg(){
			this.form.avatarUrl = '';
		}
	}
}
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

.slot-btn {
	width: 200rpx;
	height: 142rpx;
	background: rgb(244, 245, 246);
	border: 2rpx dashed #D0D0D0;
	text-align: center;
	font-size: 24rpx;
	font-family: SourceHanSansCN-Regular, SourceHanSansCN;
	font-weight: 400;
	color: #999999;
	line-height: 36rpx;
}

.addBox {
	position: relative;
	top: 50%;
	transform: translateY(-50%);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

{
	pattern: /^[0-9a-zA-Z]*$/g,
	// 正则检验前先将值转为字符串
	transform(value) {
		return String(value);
	},
	message: '只能包含字母或数字',
	trigger: ['blur', 'change'],
}
1
2
3
4
5
6
7
8
9