uview表单校验带星号

发布时间:2023年12月26日

uView表单校验带星号可以通过设置required属性来实现。在uView中,可以使用组件来实现表单校验,具体步骤如下:
1、在需要校验的表单元素上添加required属性,例如:

<u-form :model="detailInfo" ref="detailInfo" :labelWidth="133" :rules="rules">
	<u-form-item label="出车里程(公里)" prop="drivingMileage" required>
		<u-input v-model="detailInfo.drivingMileage" placeholder="请填写数值" border="none"/>
	</u-form-item>
	<u-form-item label="回车里程(公里)" prop="returnMileage" required>
		<u-input v-model="detailInfo.returnMileage" placeholder="请填写数值" border="none"/>
	</u-form-item>
</u-form>

2、接着,在需要校验表单的时候,确保你调用了 validate 方法,例如:

this.$refs.detailInfo.validate().then(validate => {					
	console.log('校验通过');
}).catch(errors => {
	console.log("校验失败");
})

3、在上面的代码中,我们为每个表单项设置了 prop 属性,并且属性值与校验规则(rules)中的属性名一一对应。这样,在调用 validate方法时,就能正确地触发表单校验了。

data() {
	return {
		rules:{
			drivingMileage:[{
				type: 'number',
				required: true,
				message: '请填写出车公里数',
				trigger: ['blur', 'change']
			}],
			returnMileage:[{
				type: 'number',
				required: true,
				message: '请填写回车公里数',
				trigger: ['blur', 'change']
			}]
		}
	}
	},

如果未触发:
首先,你需要确保你的表单组件 u-form 中添加了 ref 属性,例如:

<u-form ref="detailInfo"></u-form>
文章来源:https://blog.csdn.net/maoge_666/article/details/135215876
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。