uniapp—uni-form设置自定义校验

注意！注意！注意！

onReady() {
            // 自定义验证规则 需要在onReady中设置规则

            // uni-forms上不需要绑定rules（否则会出现只第一次验证的问题）
            this.$refs.form.setRules(this.rules)
        },

具体见script部分。

感谢：uni-app小程序表单校验只生效1次 - DCloud问答

template部分：

<template>
	<view>
		<view class="popup-class">
			<button type="default" @click="open">修改资料</button>
		</view>
		<uni-popup ref="popup" background-color="#fff">
			<view class="popup-class">
				<uni-forms ref='form' :modelValue='userInfo'>
					<uni-forms-item label="用户名">
						<uni-easyinput v-model="userInfo.UserName" placeholder="用户名"></uni-easyinput>
					</uni-forms-item>
					<uni-forms-item label="邮箱" name="Email">
						<uni-easyinput v-model="userInfo.Email" placeholder="邮箱"></uni-easyinput>
					</uni-forms-item>
					<uni-forms-item label="手机" name="Mobile">
						<uni-easyinput v-model="userInfo.Mobile" placeholder="手机"></uni-easyinput>
					</uni-forms-item>
					<uni-forms-item>
						<button type="primary" @click="ChangePersonalHanlder">保存</button>
					</uni-forms-item>
				</uni-forms>
			</view>
		</uni-popup>
	</view>
</template>

script部分：

<script>
	export default {
		data() {
			return {
				userInfo: {
					"UserName": "",
					"Email": "",
					"Mobile": "",
				},
				rules: {
					Email: {
						rules: [{
								required: true,
								errorMessage: '请填写邮箱',
							},
							{
								validateFunction: function(rule, value, data, callback) {
									let email_reg =
										/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
									if (!email_reg.test(value)) return callback('请输入正确的邮箱格式！');
									return true
								}
							}
						],
					},
					Mobile: {
						rules: [{
							required: true,
							errorMessage: '请填写手机号',
						}, {
							validateFunction: function(rule, value, data, callback) {
								let reg = /^((13[0-9])|(14[0-9])|(15[0-9])|(17[0-9])|(18[0-9]))\d{8}$/;
								if (!reg.test(value)) return callback('请输入正确的11位手机号！');
								return true
							}
						}],
					}
				}
			}
		},
		onReady() {
			// 自定义验证规则 需要在onReady中设置规则 uni-forms上不需要绑定rules（否则会出现只验证一次的问题）
			this.$refs.form.setRules(this.rules)
		},
		methods: {
			open() {
				this.$refs.popup.open('bottom')
			},
			ChangePersonalHanlder() {
				this.$refs.form.validate().then(res => {
					// ChangePersonal(this.postData).then(rep => {
					// 	if (rep.state === "success") {
					// 		uni.showToast({
					// 			title: rep.message,
					// 			icon: 'none',
					// 			duration: 1000,
					// 			success() {}
					// 		})
					// 		this.$refs.popup.close();
					// 	};
					// })
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			}
		},
		onLoad(option) {},
		mounted() {}
	}
</script>

style部分：

<style lang="scss" scoped>
	.popup-class {
		padding-left: 15px;
		padding-right: 15px;
		padding-top: 10px;
	}
</style>

后记：致不小心就混用的Finelen~