uni-app项目uview的表单验证在小程序上不生效

前情

uni-app是我比较喜欢的跨平台框架，它能开发小程序/H5/APP(安卓/iOS)，重要的是对前端开发友好，自带的IDE让开发体验非常棒，公司项目就是主推uni-app，在uniapp生态中uView是其中非常好的全平台的第三方开源ui库，我在公司项目中果断的使用了它。

坑位

在用uView做小程序表单验证的时候，对于普通的验证是没有问题，如果要用到正则或者自定义验证方法，发现在小程序不生效。

Why?

是自己大意了没有闪，没细看官方文挡，官方文挡在Form表单文挡最开头就强调了，微信小程序要特殊处理，对于使用正则也是不行，有可能是用了正则就是走的自定义验证方法了吧。

解决方案

在小程序中，使用uView的表单验证如果你使用了正则验证或者自定义验证方法验证，那就不能通过:rules给form组件传验证规则，只能通过setRules(rules)手动指定form的验证规则才行。

不需要手动指定验证规则：

<template>
	<view class="page-container">
		<u-form
			:model="form"
			:rules="rules"
			ref="addressForm"
		>
			<view class="form-wrap">
				<u-form-item
						label="姓名："
						required
						labelWidth="auto"
						borderBottom
						prop="name"
				>
					<u--input
							v-model="form.name"
							inputAlign="right"
							placeholder="请输入"
							border="none"
							type="number"
					></u--input>
				</u-form-item>
				<u-form-item
						label="手机号码："
						required
						labelWidth="auto"
						borderBottom
						prop="phone"
				>
					<u--input
							v-model="form.phone"
							inputAlign="right"
							placeholder="请输入"
							border="none"
							type="number"
					></u--input>
				</u-form-item>
			</view>
		</u-form>
		<button @click="submit">提交</button>
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				form: {
					name: '',
					phone: '',
				},
				rules: {
					name: [
						{
							required: true,
							message: '请输入联系人姓名',
							trigger: ['blur', 'change']
						}
					],
					phone: [
						{
							required: true,
							message: '请输入手机号码',
							trigger: ['blur', 'change']
						}
					]
				}
			}
		},
		methods: {
			submit() {
				this.$refs.addressForm.validate().then(res => {
					uni.$u.toast('校验通过');
				}).catch(errors => {
					uni.$u.toast('校验失败');
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.form-wrap{
		padding:0 32rpx 40rpx 32rpx;
		::v-deep{
			.u-form-item__body__left__content__label{
				font-size: 32rpx!important;
				color: #111111;
			}
			.u-form-item__body{
				padding: 32rpx 0;
			}
			.input-placeholder{
				text-align: right;
			}
			.u-input__content__field-wrapper{
				margin-right: 4px;
			}
		}
	}
</style>

需要手动指定验证规则，因为姓名使用了pattern/手机又使用了自定义的验证方法：

<template>
	<view class="page-container">
		<u-form
			:model="form"
			ref="addressForm"
		>
			<view class="form-wrap">
				<u-form-item
						label="姓名："
						required
						labelWidth="auto"
						borderBottom
						prop="name"
				>
					<u--input
							v-model="form.name"
							inputAlign="right"
							placeholder="请输入"
							border="none"
							type="number"
					></u--input>
				</u-form-item>
				<u-form-item
						label="手机号码："
						required
						labelWidth="auto"
						borderBottom
						prop="phone"
				>
					<u--input
							v-model="form.phone"
							inputAlign="right"
							placeholder="请输入"
							border="none"
							type="number"
					></u--input>
				</u-form-item>
			</view>
		</u-form>
		<button @click="submit">提交</button>
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				form: {
					name: '',
					phone: '',
				},
				rules: {
					name: [
						{
							required: true,
							message: '请输入联系人姓名',
							trigger: ['blur', 'change']
						},
						// 正则判断为字母或数字
						{
							pattern: /^[\u4e00-\u9fa5]+$/g,
							// 正则检验前先将值转为字符串
							transform(value) {
								return String(value);
							},
							message: '只能包含字母或数字'
						},
					],
					phone: [
						{
							required: true,
							message: '请输入手机号码',
							trigger: ['blur', 'change']
						}, {
							validator: (rule, value, callback) => {
								return uni.$u.test.mobile(value);
							},
							// pattern: /^1\d{10}$/,
							message: '请输入正确的手机号',
							trigger: ['blur', 'change']
						}
					]
				}
			}
		},
		mounted() {
			// 手动提定rules
			this.$refs.addressForm.setRules(this.rules);
		},
		methods: {
			submit() {
				this.$refs.addressForm.validate().then(res => {
					uni.$u.toast('校验通过');
				}).catch(errors => {
					uni.$u.toast('校验失败');
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.form-wrap{
		padding:0 32rpx 40rpx 32rpx;
		::v-deep{
			.u-form-item__body__left__content__label{
				font-size: 32rpx!important;
				color: #111111;
			}
			.u-form-item__body{
				padding: 32rpx 0;
			}
			.input-placeholder{
				text-align: right;
			}
			.u-input__content__field-wrapper{
				margin-right: 4px;
			}
		}
	}
</style>