uView this.$refs.uniForm.validate() 无效输出状态为pedding

最新推荐文章于 2024-09-30 17:22:00 发布

麸or莘

最新推荐文章于 2024-09-30 17:22:00 发布

阅读量912

点赞数 1

CC 4.0 BY-SA版权

文章标签： javascript

本文链接：https://blog.youkuaiyun.com/Y_I_M_I_l_u_c_k/article/details/132584227

文章讲述了在使用uView框架的Form表单时，遇到submit时无法直接通过this.$refs.uniForm.validate()验证的问题，需使用.then进行回调才能获取验证结果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

根据uView官网的Form表单使用方法，就算直接复制官网的使用方式，在submit时也无法进入this.$refs.uniForm.validate()之中，导致表单无法验证进行提交.

输出：console.log(this.$refs.uniForm.validate())一直输出状态，后面使用.then进行接收才能进入状态。

官网测试的代码如下

<template>
	<view class="">
		<u-form :model="form" ref="uForm">
			<u-form-item label="姓名" prop="name">
				<u-input v-model="form.name" />
			</u-form-item>
		</u-form>
		<u-button @click="submit">提交</u-button>
	</view>
</template>

<script>
export default {
	data() {
		return {
			form: {
				name: '',
			},
			rules: {
				name: [
					{
						required: true,
						message: '请输入姓名',
						trigger: ['blur', 'change']
					}
				]
			}
		};
	},
	methods: {
		submit() {
			this.$refs.uForm.validate(valid => {
				if (valid) {
					console.log('验证通过');
				} else {
					console.log('验证失败');
				}
			});
		}
	},
	// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	}
};
</script>

修改后

 methods: {
        submit() {
            this.$refs.uForm.validate().then(res => {
                if (valid) {
                    console.log('验证通过');
                } else {
                    console.log('验证失败');
                }
            });
        }
    },

不确定这样对不对，但是官网那种方法一直没法解决，如果有解决办法，望告知。