uView/u--form/u-form-item/u--input必填项显示红色星*号/表单校验带红色星*号

1.无校验，仅添加红色星*号

在需要校验的u-form-item上添加required属性即可，搭配u–form的:labelWidth控制长度，我这里是无label值的，如下方图片

<u--form labelPosition="left" :labelWidth="1">
	<u-form-item borderBottom required>
		<u--input prefixIcon="home-fill" v-model="datainfo.derName" placeholder="单位名称" border="none"></u--input>
	</u-form-item>

	<u-form-item borderBottom required>
		<u--input prefixIcon="account-fill" v-model="datainfo.derContacts" placeholder="联系人" border="none"></u--input>
	</u-form-item>
</u--form>

2.加表单校验

①注意u–form添加ref、rules属性；注意u-form-item添加prop属性

<u--form ref="datainfoRef" :model="datainfo" :rules="rules" labelPosition="left" :labelWidth="1">
	<u-form-item prop="derName" borderBottom required>
		<u--input prefixIcon="home-fill" v-model="datainfo.derName" placeholder="单位名称" border="none"></u--input>
	</u-form-item>

	<u-form-item prop="derContacts" borderBottom required>
		<u--input prefixIcon="account-fill" v-model="datainfo.derContacts" placeholder="联系人" border="none"></u--input>
	</u-form-item>
</u--form>

②设置rules校验规则，注意表单项的prop属性值和rules中的属性名对应，否则validate无法触发

<script>
export default {
	data() {
		return {
			rules:{
				derName:[{
					type: 'string',
					required: true,
					message: '请填写单位名称',
					trigger: ['blur', 'change']
				}],
				derContacts:[{
					type: 'string',
					required: true,
					message: '请填写联系人',
					trigger: ['blur', 'change']
				}]
			},
		}
	},
}
</script>

③validate校验方法

	this.$refs.datainfoRef.validate().then(validate => {
		uni.showToast({
			title: "校验成功",
			icon: "none"
		})
	}).catch(errors => {
		uni.showToast({
			title: "校验失败",
			icon: "none"
		})
	})

以上是本文全部内容，感谢查看！
欢迎参考，感谢指正！